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First Unit 


Websits 


(1) Recognize some basic scientific concepts and terminology 
of information technology ( Website — Webpage.) 

(2) Practice Basic processes for dealing with information and 
communication technology applications. 
Discusses the impact of the usage of modern information 
technology services to the different academic and life fields. 


First Topic ¥F 


HTML language 
Form Some forminputecontrols 


By the end of this topic, students should be able to: 
(1) Explain tags. ; 
(2) Employs tags in order to create an interactive 
Webpage. 


(3) Perform some operations ( add data field / add 
a radio button) 


(4) Participates his school mates in the learning activities. 


Fig IONS gp te AO AA A 1 


HTML language 


Form - some form input controls 
Preface ) 


- Dear students: We have finished in the first semester designing 
a number of my school site pages, which displays information 
about the school, to visit her, and wander inside only, without 


the possibility of holding any processing through you or through 
the visitors (Static webpage). 


- We will in this chapter create interactive webpage through 


which you can enter your personal data through a From data 
input elements as following: 


& To create a form use <form> .... </form> tag. 

= Through the Form we add a group of elements to a webpage 
such as buttons and fields, which used to enter data, into 
interactive webpage using the HTML language in order to 
send to the website to storing. 


Add Name field | 


- Text data field, allows to the user to enter a string or text data, 
using keyboard. 


- To adda textbox for enter a student name 1- HTML language 
to a webpage, use the following tag: Text box 


(<input pe= "exe 


(2) Write the following HTML tags. 


<form> 


Name: 
< input type = "text"> 
</form> 


(4) Open the HTML document in the Internet browser, webpage 
will be shown as follows. 


Text field 


O DAY After adding a text field, you can type your name 
or any text within it. 


Add Password field 


- The password field, use to enter the password to a webpage 
via keyboard. 


- Shows the symbol (*) when you type a password in order to 
hide the true password components. 


Password field 


- To add a password field to the webpage use the following tag: 


Le J 


- The following steps to add a password field: 
(1) Create a new text file. 
(2) Write the following HTML tags. 


<form> 
Password: 
< input type = "password"> 


</form> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser, webpage 
will be shown as follows. 


Password: [eeseees 


Password field 


Ht] Note; After adding a password field, you can type any 
secure text within it. 


He] Note: You can add the confirm password field, by follow 
the above steps to create the password field. 


Add Age Text Field | 


- Follow the previous steps to add a data field in order to you can 
type your age. 
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Add a radio button field | 


- A radio button, by which the user can select one of a limited 
number of options such as your gender (male / female). 


O ®@ 


Radio buttons 
- To add a radio button to the webpage, use the following tag: 


< input type = "radio"> 


- To add the radio buttons, use the following steps: 
(1) Create a new text file. 


(2) Write the following HTML tags. 
<form> 


male < input type = "radio"> 
female < input type = "radio"> 


</form> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser, webpage 
will be shown as follows. 


*#f Note:] After adding the radio buttons, you still can choose 
select all available options, and this a problem. 


BIRD arnore TO pie | sare 
fe] Note: 


æ You can select the two radio buttons (male / female) at the 
same time. 

- How can you prevent the user from selecting all available options? 

- To prevent the user from choosing all available options, use the 
attribute "name". 

- Add name attribute to all available radio buttons with the same 
value. 

- Give the name, such as "a" for all available radio buttons. 


<form> 
male < Input type = "radio" name = "a"> 


female < Input type = "radio" name = "a"> 
</form> 


- Open the HTML document in the Internet browser, webpage 


@ me O wm 


will be shown as follows. 


# Form: with a Form element you can add a group of other elements 
to a webpage such as buttons and fields, used for data entry in 
order to send this data to storing. 

æ Text input field: which gives ability to the user to enter a string or 

text data via keyboard. 

- To add a text input field on the web page, use the following tag: 
< input type = "text"> 


Lo J 


@ Password input field 
- The (*) symbol will be displayed instead of characters to secure 


a password key. [en 2] 


- To add a password field to enter password we use the following tag: 


< input type = "password”> 


@ Radio input field: 0 @ 
- By which the user can select only one of a limited number of 
options such as your gender (male / female). 


- To add a radio button on the web page, use the following tag: 
male < mput type = “radio"> 
female < input type = "radio"> 
- The attribute "name" used for selecting names of radio buttons: 
# In order to prevent the user from selecting all available options 


at the same time, write the following code. 
male < input type = "radio" name = "a"> 
female < input type = "radio" name = "a"> 


* First: Complete the following steps to add a text input field: 


© Create a new .......... , using Notepad program. 
[2] Type the following tags within the ........... 

© <form 

@ Name 

2 type = “text> 

PS cect > 

@ Save the text file in extension ...........-.------» 
8 Open thé text file in thé s.ncannnas 


Lie } 


* Second: Put (v) for right answer and (x) for wrong answer: 


@ Create static webpage through which you can enter your personal 


data through a From data input elements. ( ) 
© To create a new text file, use Photoshop program. ( ) 
© We must save the text file with .htm extension. ( ) 
© We use <head> ..... </head> tag to create a Form. ( ) 
© Text input field which gives ability to the user to enter a string or 
text data via keyboard. ( ) 
O Radio input field, which gives ability to the user to enter text data, 
by the keyboard. ( ) 
© To add a radio button to the webpage, type the following tag 
within the <form>. < Input type = "password"> ( ) 


© The (*) symbol will be displayed instead of characters to secure 
a password key. ( ) 
© To create a password field to inter a password data, type the 
following tag within the <form>. <Input type = "text"> ( ) 
© You can not add the age field to the webpage. ( ) 
* Third: Write scientific concept for each of the following 
sentences: 


© Placed upon some of the elements such as buttons and fields, 
used to enter data, in order to send to the Web site to storing.. 


© Allows visitor of the web page to enter string or text data, inside it 
via keyboard. 

© Code, which is used to create a text field on the form. 

Ø The language used in the data entry into interactive web page. 


© Code, which is used to create a radio button on a webpage. 


LJ 
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* First: Write the scientific term to the following statements: 


© Used with button and data fields to enter data and sending it to the 
webpage. 

(29 Give ability to choose or select only one option from many 
options. 


© In which you can type any text via keyboard on a webpage. 

* Second: Complete the following sentences: 

© To create an interactive webpage for register a student data you 
GOD) TO OL niasin used to input data. 

@ Toadda ole name input field, you can add ...... to a webpage. 


3] (*) symbol will be displayed instead of original text to secure ...... 


© To choose your gender you can add ................... to a webpage. 


* Third: Select from (B) column that matches with = column: 
Column (A) Column ( 


<input type = — Add a textbox field. 
2 p= "nai [8 [Aa psd 
3 | <input type = "text"> Add a radio button field. 


* Fourth: Put (~) or (x) in front of the following: 
O ina webpage the from element doesn't require sending the entered 
data to the web server. Gad 


@ To prevent the user from choosing or selecting more than one 
option or choice, you can add name attribute to radio input field.( ) 


© To add a textbox field in order the user can enter his name, you 
add radio field. ( ) 


Preparatory question for the next topic: 


After-you’ve created a webpage with a Form and many input fields. 
How you:ean add:another fields to can (clear or save) entered data? 


Second Topic #* 


HTML languac age 


OBJECTIVES: 


z - . ‘ . 4 š oss 4 r 4 
r ` p ‘anir marione wi an ahlo frn- 
£ jfi is topic, STUCEHTS WI De apie to: 


|) Explain some of the HTML input elements (checkbox - button 
- submit - reset). 
(2) Type some of HTML tags correctly. 


(3) Remind the largest possible number of ideas for using HTML 
Tags. 


4) Show a positive trend towards the importance of HTML 
language. 


2a 
HTML language 


Form elements input fields Continued 


Preface 


- We will add checkboxes, to give ability to the user that he can 
select more than one box at the same time. 


Checkbox field | 


- To select your proficiency language(s): 
- You can add checkbox input field by which you can select more 
than one choice. ` 


- To add a checkbox field to a webpage, use the following tag: 
<input type = "checkbox"> L] 
checkboxs 


© RAA You can repeat the previous command to add more 
than the selection of the webpage fund. 


- To add a checkbox, follow the following steps: 


(1) Create a new text file, using Notepad program. 
(2) Write the following HTML tags. 


<form> 
Select your proficiency languages<br> 
Arabic < input type = "checkbox"> 
English< input type = "“checkbox"> 
French< input type = "checkbox"> 
</form> 


- Repeat the command number of choices (altematives) available. 
(3) Save the text file with .htm extension. 


(4) Open the HTML document in the Internet browser, webpage 


will be shown as follows. 


Button input field | 


- Button is used to performs a specific task. 


- The user can click on it to achieve or execute JavaScript 
function such as clear or save entered data within the form. 


- To add a button to a webpage, use the following tags? nam 


Lis } 


- To add a button, follow the following steps: 


(1) Create a new text file. 
(2) Write the following HTML tags. 


<form> 
<input type = “button” 
</form> 


=a 
fs value = DK 
Yasue — 


> 


(3) Save the text file with .htm extension. 


(4) Open the HTML document in the Internet browser, webpage 
will be shown as follows. 


fe] Note] 


- In the previous code, we've used attribute "value" to assign 
caption to a button "ok". 


- There are three types of buttons, that can be added to the from 
as follows: 

(1) Button: used to performs a specific task. ok] 

(2) Submit; used to send data. | Suert Guey 

(3) Reset; used to delete data. | reset | 


Os) 


iz 2 
Submit button | 


- It is used to send the form data, which you have entered using 
the form elements to another webpage, assigned by action 


attribute value of the form. 
Submit button 


- To add a submit button to a webpage, use the following tags: 


- To add a submit button, follow the following steps: 
(1) Create a new text file. 
(2) Write the following HTML tags. 


<html> 
<form> 
<form action = "process.php" > 
<input type = "submit"> 
</form> Webpage that 
</html> will receive data 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in the 


Internet browser, webpage will 
look like. 


ie] Note: 


- In the previous HTML tags, after clicked submit button, all data 
send to a webpage named "process.php" in order to processing 
via PHP statements. We will teach PHP language next years. 


new user 


Reset button | 


- It is used to clear all data fields, which you have entered and 
a return to the default values of the controls. 
- To add a reset button to a webpage, use the following tags: 


<input type = "reset"> 


- To add a reset button, follow the following steps: 


(1) Create a new text file. 
(2) Write the following HTML tags. 
<form> 
<input type = "reset"> 
</form> 
(3) Save the text file with .htm extension. 


Dm2 a nnn renin, Fo 2 gae 
(4) Open the HTML document in the Internet browser, webpage 
will be shown as follows. 


Reset button 


- Checkbox field give ability to the user that he can select more 
than one box at the same time. 


- To add a checkbox field to a webpage, use the following tags: 

< Input type = "checkbox"> 

- Repeat the previous command number of choices (alternatives) 

available. 

* Button input field: It is used to performs a specific task, the user 
can click on it to achieve or execute JavaScript function 
such as clear or save entered data within the form. 

- To add a button on the webpage, use the following tags: 

<input type = "button"> 
<input type = "button" value ="0k" > 

- In the previous code, we've used attribute "value" to assign caption 

to a button "ok". 

- There are three types of buttons, that can be added to the from as follows: 


(1) Button: used to perform a certain task. 
(2) Submit: used to send data. 


(3) Reset: used to delete data. 


* Submit button: The user click this to submit the form data to 
another webpage assigned by action attribute value of the Form. 
- To add a submit button, use the following tags: 


<input type = "submit"> 
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* Reset button: The user click it to clear all data fields to return to 
its original state. 
- To add a reset button to a webpage, use the following tag: 


<input type = "reset"> 


QUESTIONS Guna 


* First: Put (v^) for right answer and (x) for wrong answer: 
@ Checkbox input field by which you can select more than one 
choice at the same time. ( ) 


@ A radio button field by which you can select more than one 
choice at the same time. ( ) 


© To add a checkbox to the web page, use the following tags: 
<Input type = "checkbox"> ` ( ) 


© There are only one type of buttons, that can be added to a from. 
( ) 
© When pressing on button, can performed many functions, such as 
load a function, or store your data, or delete your data. = ( ) 
© To choose which language you learned, or more than one language 
use text field. ( ) 
@ Submit button is used to send your data, which you have entered 
using the form elements. ( ) 


© Reset button is used to delete your data, which you have entered 
and a return to the default values of the tools. ( ) 


© You can repeat the following command to add more than 


choosing box on the web page. <Input type ="reset"> ( ) 
M We can use an attribute "value" to add text that appears on the 
button. ( ) 


* second: Choose the correct answer from between the brackets: 


allows you to choose an alternative or more at the same 
time. (Button - Checkbox - Submit) 
© When pressing on ......... , can perform many functions, such as 


load a function, or store your data, or delete your data. 
(button - Reset - Submit) 
© We can use a attribute "..." to add text that appears on the button. 
(Reset - Submit - value) 
@Q......... button is used to send your data, which you have entered 
using the form elements. 
(Submit — Check box — Reset) 
@ ......... button is used to delete your data, which you have entered 
and a return to the default values of the tools. 
(Submit — Check box — Reset) 
* Third: Matching from column (A) for column (B): 


Column (A) Column (B 


| B) 
. <Input type="checkbox"> | A i to performs a specific 


Reset button B Used to send all form data. 
a ae: Used to clear all form data. 


: To select an alternative or 
. Submit button 
more at the same time. 
Checkbox e To add a checkbox on the 
web page. 


* Fourth: Write scientific concept for each of the following: 


© When pressing on it, can perform many functions, such as load 
a function, or store your data, or delete your data. 


= | > ee! 
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Qa language is used to create a text file with htm extinction. 
© Used the attribute to add a text that appears on the button. 
© Allows you to choose an alternative or more at the same time. 
© Tag is used in addition fund choice. 


© A button is used to send all form data to other webpage. 


* First: Put (v) or (x) in front of the following sentence: 


@ To select your proficiency language(s), you can add checkbox 


input field to a webpage. ( ) 
© Name attribute used for display a text on the button. ( ) 
© Submit used to clear input fields from any previous data. ( ) 


* Second: Complete the following statements: 


| used to execute task or call JavaScript function. 
A used to send all Form data to other webpage. 
a used to clear all previous data form all input fields. 
* Third: Select from (B) that matches with other (A): 


Column (A) Column (B) 
<input type = "checkbox"> | A | Add a submit or send button. 


[pete = on™ |D [ Ad est or ear buon 
[3 input ype = "suomi > | C [Adda checkbox 
<input type = "reset"> D| Add a button. 


Preparatory question for the next topic: 


- After you’ve known Form and its data field which required to register 
your data. How can you create a webpage with a registration Form? 


Third Tople 


Project 


Design a Webpage with a registration data Form 


By the end of this lesson, students will be able to: tW 


(1) Design an interactive web page to register his data. 
(2) Type a tags to register data correctly. 


(3) Appreciate the importance of language for create an 


interactive webpage. 
—__ SHTML S | 


_TAGS 


Project 
Design a Webpage with a registration data Form 


- Design an interactive webpage. 
- Using the previous Form and data fields, create an interactive 


webpage as in the following: 


- The following codes of the webpage: 


-<title> </title> 
EE T Ee s | 
» <body dir = "Itr"> ; 


-<center> 
. registration from|<br><br><br> 


: <form action="pro.php"> = 
name<input type="text"><br><br><br> 
{ ) password <input type="password"><br><br><br> 
confirm password<input type="password"><br><br><br>_ 
age(numeric)<input type="text"><br><br><br> 


\gender<input type="radio" male<input type="radio">female 
<br><br><br> |J= 3 ¿l$ 44 © Mae © Female 


| <input type="checkbox"> English f English 
_ <input type="checkbox"> French French 
<input type="checkbox"> German Germany 
2 <br><br><br> | os 3 ¿l$ dž 
) <input type="submit" value="save"'> 


1) <input type="reset" value="new"'> [humen] 
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* In the previous codes: 


- To add a text field for enter a student name to a webpage, use 


the following tags: 


Name <Input type="text"> 


- To add a password field to the webpage use the following tags: 


password <Input type=" password "> 


- To add the confirm password field, type the following tags: 


confirm password <Input type=" password "> 


- To add an age (numeric field), type the following tag: 
Age <Input type="number"> 


- To add a radio button field for male, type the following tags: 
Male <Input type="radio"> 


- To add a checkbox for German language, type the following 


tags: | German <Input type="checkbox"> 


- To adda submit "button to send your data", type the following 
tags: 
<input type="submit" value="Submit Registern> 


- To adda reset "button to delete your data", type the following 


tags: | <input type="reset" value="New"'> 


AV Some form input controls 


Through the Form we add a 
group of elements to the web 

<form> ... </form> page, used to enter data, in 
order to send to the Web site 
to storing. 


Gives ability to the user to 
Textbox <input type="text"> enter a string or text data via 
keyboard. 
As the same as text field but 
j ai ; (*) symbol will be displayed 
Password <input type="password"> instead of characters to 
secure a password key. 


Used to select only one 

r . eee TIE, option (alternative) from a 

Radio button | <input type="radio"> Hied miber oF options 
such as (male/female). 
Used to select one or more 
: mit ' option (alternative) from a 
Checkbox <input type=” checkbox"> limited number of options at 

the same time. 


Used performs a specific task 
such as load a function, or 
store your data, or delete 
your data. 


E bewi 
Used to send your data, 
which you have entered 
using the form elements to 


another webpage. 


: = " Used to clear all data fields 
Reset button <input type="reset"> | oits r 


<input type="submit"> 


* First: Matching from column (A) for column (B): 
Column (A) Column (B) 
1] <input type = "radio"> 
2 <Input type = "submit"> B | To add a checkbox. | 
clnputie= "text> | D [To adda buon 
Anput ype = 'reset'> | E [To adda radio buton 
6 <Input type = "checkbox"> 


* Second: Put (“) for right answer and (x) for wrong answer: 


@ submit button is used to sent your data, which you have entered 
and return to the default values of the controls. ( ) 


@ Checkbox allows you to choose only one alternative from several 
alternatives. i ( ) 


© Reset button is used to send your data, which you have entered 
using word document ( ) 


© We has been used property "OK" to add text that appears on the 
button. ( ) 


© Create interactive webpage through which you can enter your 
personal data through a From data input elements. ( 


© To create a new text file, use Notepad program. 


eee ee 


( 
@ We must save the text file with .doc extension. ( 
© We use <form> ..... </form> tag to create a Form. ( 


© Text input field which gives ability to the user to enter a string or 
text data via keyboard. ( ) 


Al Faez 2 
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* First: Choose the correct answer from between the brackets: 


O ..... allows you to choose an alternative or more at the same time. 
(Button - Checkbox - Submit) 
@ we use a property "........ " to add text that appears on the button. 


(Reset - Submit - value) 
©... button is used to send your data, which you have entered 
using the form elements. (Submit - Check box - Reset) 


© When pressing on ......... , can performed many functions, such as 
load a function, or store your data, or delete your data. 
(button — Radio button — Submit button) 
© ..... field, which gives ability to the user to select only one option. 
(button — Radio button — Submit button) 


* Second: Place each number on the salientes form in front of 


) <Input type = "checkbox"> 
) <Input type = "text"> 

) <Input type = "reset"> 

) <Input type = "submit"> 

) <Input type = "radio"> 
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* Third: Write scientific concept for each of the following 


sentences: 
© Allows you to choose an alternative or more at the same time. 


@ To display a Form that was created. 


€) Through it, we add a group of elements to the webpage such as 
buttons and fields, used to enter data, in order to send to the web 
site to storing. 


© Gives ability to the user to enter a string or text data via keyboard. 
LS) Tags, which is used to add a text input field on the web page. 

* Fourth: What is the result after executing the following code: 

D Sopu = TREERE E ainean ieat NIANA E 

& Lapit Ce ARIS nren a E ERS 

© STAC ORNS onae 
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* First: Select the type of box or button to use the following: 
© We can determine the sex of student (male / female) by .......... 


button. 
Ee used to determine the hobbies or the languages 
that you prefer. 
| a es used for entering the student name. 
ees field used to type your password. 
VEEE when pressing on it can performed many functions, 


such as load a function, or store your data, or delete your data. 


iS Ss 4 A 
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* Second: Write scientific concept for each of the following 

sentences: 


© Code, which is used to create a password field on the web page. 


Oa property is used to prevent the user from choosing all available 
radio buttons. 


© It is used to select only one option (alternative) from more options 
(alternatives). 


© The property is used to add text that appears on the button. 
© The tag that is used to add a control to a webpage. 


* Third: Correct the underlined in the following codes: 
® To add a text field, <Input type = "button"> 

© To add a button, <form type = "text"> 

© To add a radio button, <Input type = "submit"> 

© To add a reset button, <Input type = "checkbox"> 

© To adda checkbox, <Input type = "checkbox"> 


* Fourth: Put (“) for right answer and (x) for wrong answer: 
© We must save the web file with doc extension. ( ) 


© Password field use to enter the password to a webpage via 
keyboard. ( ) 


© We use <form>....</form> tag to create a Submit button. ( ) 


© The interactive webpage through which you can enter your 


personal data through a From data input elements. ( ) 


© The propert "value" used to prevent the user from choosin 
property p g 


more than one option. ( ) 


EE 


n (A) ) Column (B 


apene |a| eo 


<input type = "submit"> D 1- HTML language 


5 | <input type = "radio"> Submit Que 


* Second: Select the type of box or button to use the following: 


@ The property” sscascswacex " used to prevent the user from choosing 
more than one option. 


@ To display the form which was created, we use ..............2s0008 

Ə USP cinaiswicanwaeas language, we create a form, in order to enter 
data into interactive web page. 

O ...... is used to send your data, which you have entered using 
the elements to another webpage. 

re is used to delete your data, which you have entered and 
return to the default values of the controls. 


* Third: Choose the correct answers from between the brackets: 


@ The o.oo symbol appears when you type the password to 
hide the real password components. 
(&-@-*- 3) 
@a program used to create a text file with htm extinction. 
(Notepad - paint - Photoshop) 


ES 
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® Used the property to add a text on the button. 
(value - name - OK) 


© Allows you to choose an alternative or more at the same time. 
(Submit button - Checkbox - Radio button) 


© It is used to clear all your data, which you have entered using the 
form elements. 
(Reset button - Checkbox - Radio button) 


(6] We must save the text file with ......... Se Y aa O AE A extension. 
(html — htm — All of the previous) 


* Fourth: Put (“) for right answer and (x) for wrong answer: 


© When pressing on Textbox, can perform many functions, such as 
load a function, or store your data, or delete your data. ( ) 


2N checkbox is used to send all form data to other webpage.( ) 


3] There are three types of buttons, that can be added to the from. 
( ) 
© Reset button is used to send the form data, which you have 
entered using the form elements to another webpage. ( ) 


© To add a submit button use the tag: <Input type = "submit"> 


Prep ae question for the next topic: j= 


f 


Second Unit 


Java Script language 


(1) Discuss the effect of using the services of the modern 
information techniques on academic and different life fields. 

(2) Recognize some production tools of information pages and 
Internet services. 

(3) Produce relatively creative projects using JavaScript language. 

(4) Use technological production tools for support and develop 

his learning. 

(5) Employs technological communication tools in order to 
communicate, interact and cooperate with others to support 
learning. 


PT TTNA 
C Basics offJavaScript Language 


E By the end of this topic, students mone be able to: 
? (1) Recognize some of the basic JavaScript concepts. 
E (2) Pecomie the basic rules for TANDS a webpage using 


PS JavaScript statements. $ 
E (3) Write a yavesenet language code accurately. Ve tf 
T (4) Accept to learn the JavaScript language. be 


Al Fae) 
Basics Concepts of 


JavaScript Language 


Introduction 


* Dear student: 


To develop an interactive webpage project to register your 
data, and confirm that the entry data is correct; you will need 
to add a JavaScript statements to your webpage document. 


* HTML language isn’t enough to make a confirmation to the 
data entry. 


* The next some of the basics of programming with JavaScript. 


JavaScript fundamentals | 


(1) JavaSeript commands and instructions are called Statements. 
(2) JavaSeript commands and instructions (Statements) are 
written within HTML tags. 

(3) JavaScript statements are written inside <script> </script> 
tag. 

(4) Each statement must end with a semi-colon (3) character. 

(5) JavaScript language is case-sensitive, so the letter case 
(small or capital letter) must be considered while writing 


JavaScript statements. 


i —— AANA 


<script></script> 


<script></script> p” 


</body> 


</html> 


Document sections in which JavaScript will be written as HTML. 


alert() statement | 


- alert( ) statement used for displaying a message via a 


dialogue box. 
- To display the message box, use the following command: 


alert ("The message"); 


- The message must written within double high quotations (""). 


- Create a webpage that displays a dialogue box with message 
"welcome" when loading by the following steps: 
Execution: | 


(1) Create a new text file. 
(2) Write the following HTML tags. 


< body> 


< script> 
C alert ("welcome"); 
</ script> 


</ body> 
(3) Save the text file with .htm extension. 
(4) Open the HTML document in an available internet browser, 


webpage will be shown as follows. 


alert message box 


Y 
AN 


- Document.write statement is used for displaying text within a 
webpage contents. 


- Create a webpage displays "computer and information 
technology subject" text as its content, by the following steps. 
Execution: 


(1) Create a new text file. 
(2) Write the following HTML tags. 


< body> 
< script> 
document.write ("computer and information technology subject"); 
</ script> 
</ body> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in an available internet browser. 


>Imember 

- alert( ) statement: used for displaying a dialogue box with message 
to the user. 

- document.write( ) statement: used for displaying a text within the 
webpage contents, on the web page itself. 


Al acs 
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* First: Put (“) for right answer and (x) for wrong answer: 


a JavaScript orders and instructions are statements. ( ) 
© HTML statements are written inside <text> </text> tag. ( ) 


(3) JavaScript commands and instructions (Statements) are written 
within HTML tags. ( ) 

8 To develop an interactive webpage project to register your data, 
and confirm that the entry data is correct; you will need to add a 


HTML statements to your webpage document. ( ) 


© HTML language is case-sensitive, so you must pay attention 
to the case of (small or capital letters) when writing statements. 


( ) 
@ JavaScript statements are written inside <script> </script> ( ) 
& Alert( ) statement used for displaying text within a webpage 
contents. ( ) 
© HTML commands and instructions (Statements) are written 
within JavaScript tags. ( ) 
© Each HTML statement must end with a semi-colon (;) character. 
( ) 
© Document.write statement used for displaying a message via a 
dialogue box. ( ) 


* Second: Write scientific concept for each of the following 
sentences: 


O The language is used to create and design an interactive webpage. 


© Statement used for displaying a message via a dialogue box. 


E JavaScript must end with a certain tag. 


: 


Ø The language is used to create and design static webpage. 


© Statement used for displaying text within a webpage contents. 


* Third: Choose the correct answer from between the brackets: 
P JavaScript statements are written inside ................ tag. 
(<from> </form> — <script> </script> — <html> </html>) 
o develop an interactive webpage project to register your data, 
@ To devel i ive web j i d 
and confirm that the entry data is correct; you will need to add 
i PER statements to your webpage document. 
(HTML — PHP — JavaScript) 
VEEN language isn’t enough to make a confirmation to the 
data entry. 
(Statements — java script - HTML) 
4) JavaScript commands and instructions are called Statements ...... 
(Statements — Alert — java script) 


— are places of written java script inside HTML file. 
(head of webpage — in the body of webpage — All of the previous) 


@ ..... statement used for displaying text within a webpage contents. 
(document.write( ) — alert( ) — java script) 


@ ........ statement used for displaying a message via a dialogue box. 
(document.write( )— HTML — alert( )) 


© There isn’t any different between using small and capital letter 
while writing ............. statements. 
(Statements — java script - HTML) 


& JavaScript statements are end with ............ character. 
iy- C=) 


Al Foes 
* Fourth: Complete the following tags: 


@ To design a webpage that displays a dialogue box with message 
"welcome" when loading. 


<Script> 


On eee eee 


© To design a webpage displays "computer and information 
technology subject” text as its content. 


* First: Write the scientific term to the following statements: 
@ The language used to make your registration webpage to 
interactive. 


© Used for displaying a dialogue box with message to the user. 
© Used for displaying a text within the webpage contents. 


* Second: Put (v) in front of the correct sentence and (X) in 


front of the wrong one: 
© HTML language isn’t enough to make a confirmation to the data 
entry. ( ) 
© Each statement must end with a semi-colon (;) character. ( ) 


© There isn’t any different between using small and capital letter 
while writing JavaScript statements. ( ) 


Preparatory question for the next topic: 


- When displaying the web page we note that the code is 
implemented automatically. 
- Can you implement the code only when you need it? 


‘ SOY 


* First: Put (“) for right answer and (x) for wrong answer: 
ap JavaScript statements are written inside <scripts> </script> ( ) 


@ HTML language isn’t enough to make a confirmation to the data 


entry. ( ) 
© HTML commands and instructions (Statements) are written 

within JavaScript tags. ( ) 
© Each HTML statement must end with a semi-colon (;) character. 

( ) 

© document.write statement used for displaying a message via a 

dialogue box. ( ) 
* Second: Choose the correct answer from between the brackets: 
ae statement used for displaying a message via a 


dialogue box. 
(Statements - JavaScript - alert( )) 


@ ww... commands and instructions (Statements) are written 
within HTML tags. 
(Statements - JavaScript - HTML) 


3 language isn’t enough to make a confirmation to the 


data entry. 
(HTML - JavaScript - Document.write( )) 


© Each statement must end with ............. 
(Brackets { } - semi-colon (5) - quotation marks " "') 


eee statement used for displaying a message written on 
the web page itself. (Statements - JavaScript - Document.write( )) 


Al aes 


* Third: Write scientific concept for each of the following 
sentences: 


@ It is used to select one option or more from all available options. 
@ The property is used to add text that appears on the button. 


Oa program used to create a text file with htm extinction. 


Oa property is used to prevent the user from choosing all available 
radio buttons. 


© Itis used determine the sex of student (male / female). 


* Fourth: Matching from column (A) for column (B): 


Column Column (B) 


(A) | 
The (°) symbol 


l 
2| texttox fe Used to clear all data fields to its 
original state. 
will be displayed instead of 
3 <form> ... </form> C | characters to secure a password 
key. 
, Š s Gives ability to the user to enter a 
< — > 
mpk yp umber D string or text data via keyboard. 


* First: Put (“) for right answer and (x) for wrong answer: 


0 To display the message box, use the command: 


Document.write ("message"); ( ) 
@ The message must written between quotations marks (" ").( ) 
© We used property "value" to add a text on the button. ( ) 


© Reset button is used to send your data, which you have entered 


using word document ( ) 
© There are only one type of buttons, that can be added to the from. 
( ) 
(6) JavaScript statements are written inside <html> </html> ( ) 
@ HTML language is enough to make a confirmation to the data 
entry. ( ) 


© HTML commands and instructions (Statements) are written 


within JavaScript tags. ( ) 
© Each HTML statement must end with a semi-colon (;) character. 
( ) 
10) Through the Form we add a group of elements to a webpage 
such as buttons and fields.. ( ) 


* Second: Complete the following from between the brackets: 
(button - Reset — Checkbox — Submit - value) 


@ ......... allows you to choose an alternative or more at the same 


time. 


© When pressing on ......... , can perform many functions, such as 


load a function, or store your data, or delete your data. 
© We can use a property "..." to add text that appears on the button. 


ss .... button is used to send your data, which you have entered 


using the form elements. 


B mur button is used to clear your data, which you have entered 


and a return to the default values of the tools. 


(6) We must save the text file with ......... ee extension. 


Wy 
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* First: Put (v) or (x) in front of the following: 


© To add a textbox field in order the user can enter his name, you 
add radio field. ( ) 

@ To add a student name input field, you can add Text input field to a 
webpage. ( ) 


3) (&) symbol will be displayed instead of original text to secure a 
password key. ( ) 


© To select your proficiency language(s), you can add checkbox 
input field to a webpage. ( ) 


© ina webpage the from element doesn't require sending the entered 
data to the web server. ( ) 


@ To prevent the user from choosing or selecting more than one 
option or choice, you can add value attribute to radio input field. 


( ) 
* Second: Write the scientific term to the following statements: 


@ Used to clear input fields from any previous data. 


© Used with button and data fields to enter data and sending it to the 
webpage. 
© An attribute used for display a text on the button. 


Ø Give ability to choose or select only one option from many 
options. 


© Used to execute task or call JavaScript function. 
© Used to send all Form data to other webpage. 
® Used to clear all previous data form all input fields. 


~~" 
% 
‘ 
‘ 
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* Third: Choose the correct answer: 


OD vccccccocces language used to make your registration webpage to 
interactive. 
( HTML — Java Script — Form — Alert ) 
@ ...... used for displaying a dialogue box with message to the user. 


( HTML — document.write( ) — Form — Alert( ) ) 
© Used for displaying a text within the webpage contents. 
( HTML — document.write( ) — statement — Alert( ) ) 


SOT language isn’t enough to make a confirmation to the data 


entry. 
( HTML — document.write( ) — Form — Alert( ) ) 


© Each Java Script vss must end with a semi-colon (;) character. 
( different — document.write( ) — statement — Alert( ) ) 
@ There is ............... between using small and capital letter while 
writing JavaScript statements. 
( Difference — similarity — Paint — Notepad ) 
© .........a program is used to create a text file with htm extinction. 
( Difference — similarity — Paint — Notepad ) 


* Fourth: Select from (B) column that matches with (A) column: 


Column (B) 


Column (A) | 
a <input type = "password"> Add a textbox field. 
2 | <input type = "radio"> Add a password field. 


Value D To add a text on the button. 


5 | <input type = "reset"> E | To add a text on the button. 
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Second Topic 


POR 


Java Serine 


Calling JavaScript code 


es 


(1) Recognize how to call JavaScript code using a button. 


OBJECTIVES: 


By the end of this topic, students should be able to: 


(2) Recognize the function structure. 
(3) Write JavaScript statement for calling a function. 
(4) Employ JavaScript tools in his interactive project.. 


(5) Participate with his schoolmates in the learning activities — 


Calling Java Script code 


JavaScript statement for calling a function 


* All JavaScript statement within <script>...</script> tag 
implemented automatically. 


* Tf you want the JavaScript statement within script>...</script> 
tag to be implemented when an event occurs (such as button 
click), you should use a function. 


Functions _] 


- Function js JavaScript statements grouped together in named 
block and performed according to call it, and we should give it 
a suitable name refer to its job. 


OREA we will learn to: 


* Create a JavaScript function contains a group of statements. 


* Call the function according to occurrence of a button click. 


Function Creation | 


- Next steps to create a function: 


(1) Write word function and followed with its suitable name. 


(2) Write a group of JavaScript statements between { ... } curly 
brackets as shown in the following rectangle. 


function function-name( ) { 


Code to be executed 


- Create a function that displays "Arab Republic of Egypt" via 
a message box. Execution: 


[1] Create a new text file. 
[2] Write the following HTML tags. 
<body> 
<script> 
l function country( ) 


i 
alert ("Arab Republic of Egypt"); 
} 
</script> 
</body> 


[3] Save the text file with htm extension. 


[4] Open the document in the Internet browser. 


He] Note: 


- In the previous code, the country( ) function was not called. 


- So when opening the HTML document in an available internet 
browser, an empty webpage will be shown. 


* To implement any function, first you must call it: > 


- Next steps to call any function: 

[1] Write an HTML tag for displaying a button within webpage. 
<input type="button"> . 

[2] Write an ‘onclick’ attribute to this button. 
<input type="button" onclick=" "> 

[3] Write a function name as the value of that attribute (onclick). 


| <input type="button"] | onclick="function name you need to call">] 


— 
- Change the previous activity so that the country( ) function can 
be executed when a button clicked. Execution: 


(1) Open the previous HTML document. 
(2) Change the contents so it will be shown as the following: 


<body> 
<input type="button" onclick="country( )" value="click me"> 


<script> 


steeeeeeeeeeseeeesnsnerevenereneuercrseseneneussnssasaseuneresenvenssseeneenenuseunneteenensunersseunseneeeeeneretenes : 


| | function country( ) { 
alert ("Arab republic of Egypt") 


[3] Save the modifications to the file. 
[4] Open the document in the Internet browser. 


Al Fae- p] 
He} Note: 


- Function will be called and executed only when a button 
clicked and message box contains "Arab republic of Egypt" 
appears. 


| Textbox content manipulation — 


- In the following figure, we will find: 


(1) A textbox and button is displayed, write any text within the 
textbox. 
(2) When a button clicked, an alert box will be displayed in 


which the content of the textbox can be seen. 


- Design a web page as shown in pervious shape by executing the 
following: 


[1] Create a new text file. 
[2] Write the following HTML tags, JavaScript statements. 


<form name="form|"> 
<input type="text" name="t1"> 
<input type ="button" onclick="printTextContent( )" value="click me"> 
</form> 
i <script> 
f function printTextContent( ) 
{ 


alert(form1 .t1.value); 


[3] save the file with .htm extension. 


[4] Open the document in the Internet browser. 


He] Note: 


- In the previous HTML document, to use and manipulate the 
textbox: 


(1) Give a name form] to the <form> element (name="form1") 
(2) Give a name tI to the textbox (name="t1") 


(3) We can use the value of the textbox through form!.tl.value 
statement 


Ea 


* All JavaScript statement within <script>...</script> tag 
implemented automatically. 


* Function is JavaScript statements grouped together in a named block 
and perform according to calling it, and we should give it a suitable 
name refer to its job. 


* If you want JavaScript statements within <script>...</script> tag to 
be implemented when an event occurs (such as button click), you 
should use a function. 


* First: Put (Y) for right answer and (x) for wrong answer: 


0) avaScript statements which are written inside <script> </script> 
tag are automatically executed. . G J 


(2) JavaScript is a set of orders that will be executed when we calling 
it, and we should give it a suitable name refer to its job. ( ) 


© we can not creating function contains JavaScript statements.(  ) 


4) To create a function, write the command "function" then write 


a suitable name. ( ) 
© We can create a function without writing a term "function". ( ) 
© The function code must written within double high quotations (""). 

( ) 

® We can call the function in order to execute its order by pressing 
on the button command. = ( ) 
© You can create a function without selecting its name. ( ) 


~~ 
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* Second: Complete the following code to create a function, 


when calling it appears a message box contains "Arab 
republic of Egypt". 


</Script> 
</body> 


* Third: Arrange the following steps to call a function: 


( ) Write a function name as the value of that attribute 
(onclick), 
( ) Write an HTML tag for displaying a button within 
webpage. 
( _-) Write following code: 
<input type="button" onclick="country( )" value="click me"> 
( ) Write an ‘onclick’ attribute to this button, 


* Fourth Choose the correct answer from between the brackets: 


@ The JavaScript statement within <script>...</script> tag 


implemented wsicsswsavsswccnvae 
(Manual — Automatically — Function) 


aa is JavaScript statements grouped together in named 


block and performed according to call it. 
(Manual — Automatically — Function) 


Ls) 


7 WW 


© The JavaScript statements of the function must written between 
aye (Fu B= Lech = baal) 

o Adding adactus attribute to the button element for is called a 
function. 


(onclick — value — name) 


S We call any function in order to execute its commands when we 
PESME Oane 
(Textbox — Checkbox — Command button) 


© To create a function must begin with the term .............. 
(Form — Java Script — Function) 


@ To create a function, write function function......... (){ 
(onclick — value — name) 
* Fifth: Create a function called country that displays "Egypt" 
via a message box. 


oO Create a new text file. Write the following tags, and save the text 


file with ........... extension. 


@ Open the document in the Internet browser. 


* Sixth: Re-Arrange the following code to create a function 
called "printTextContent": 


Codes 


Function printTextContent ( ) 


* First: Complete the following statements: 


Or you want JavaScript statements to be implemented when an 
event occurs (such as button click), you should use a ........... 

os is JavaScript statements grouped together in a named 
block and performed according to call it. 

* Second: Put (v) in front of the correct sentence and (X) in 

front of the wrong one: 

® Adding a value attribute to the button element for is called a 
function. ( ) 

@ We use a “onclick” attribute for writing a text on a button. ( ) 

© For reading a textbox content using JavaScript language, you 
should give a name to the <form> element and give a name to the 
textbox. ( ) 

@ JavaScript statement is written inside <script></script>. ( ) 


Preparatory question for the next topic: 


- After you have learnt the function creation and calling, 
- Is there any way to execute the code according to condition result? 


Third Topic 


DE 


Java Seript 


Branching “IF statement” 
OBJECTIVES 


By the end of this topic, students should be able to: lee 


(1) Use some of JavaScript statement to create a webpage. 


(2) Solve some examples using branching IF statement. 


(3) Participate his schoolmates in the learning activities. 


Branching 


~ In the previous two topics, we have noticed that, JavaScript 
statements are being executed one by one. 

~ But sometimes we may need to execute or non-execute some 
of these statements according to condition expression result 
as in the following shape: 


Print 


w| Example: 


- If the condition result lead to true (total >=50), "success" word 


will be printed. 
- To check the condition expression, we will use IF statement as 


the following: 
The general formula of condition expression. 


If (Conditional expression ) 


{ Statements to be executed if the result of the expression is true } 
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- Condition: is expression that must be evaluated first and lead 
to true or false. 

- Statements to be executed if the result lead to true found 
between { } curly brackets. 


- If the result lead to false these statements will not be executed. 


the total of 
your degrees greater than 
or equal to 50 
degree? 


- Create a webpage that contains a Form element with: 
(1) Textbox in which we can type a total of degrees. 


(2) Button on which we can click. 
(3) If the condition result lead to true, an alert box with 
"success" will be displayed as shown in figure. 


| —— ar © 
Hol 


Text box 


* Execution: 


[1] Create a new text file. 
[2] Write the following HTML tags, JavaScript statements. 


<body> 
CD) <formname = "form1"> 


<input type = "text" name = "t1"> 

<input type ="button" value ="click me" onclick="total( )"> 
S) 
6) 


</form> 


<script 


d 
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if (form1.tl.value>=50) 


alert ("successful"); 
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</scrip> KETE 
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~ 
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[3] Save the text file with .htm extension. 
[4] Open the document in the Internet browser. 


Explanation: 
(1) Give a name ferml to the<form> element (name="form1") 
(2) Give a name tl to the textbox (name="tl"). 

(3) Add a button to a webpage; <input type ="button"> 


- We've used attribute "value" to assign caption to a button "click 
me" (value ="click me") 


- The onclick event occurs when the user clicks on a button. 
- Specifies the function name (here the function is total ( )) to be 
executed. onclick="total( )" 


(4) To create total( ) function that will be called or executed on 
button clicked, Function total( ) { 
(5) We use the value of the textbox through (form|.t!.value) 
- To check the content of textbox that is found in the Form 
formi through the value attribute. if (form!.tl.value >= 50) 


(6) If the condition result lead to true, an alert box with “success” 
will be displayed. alert ("successful"); 


* Branching is execute or non-execute some of JavaScript statements 
according to condition expression result. 


* To check the condition expression, we will use IF statement. 
Branching IF statement is written as the following: 


if (condition expression) 


{ Statements to be executed if the condition result lead to true } 


- Condition: is expression that must be evaluated first and lead to 
true or false. 


- If the result of the expression is false, the statements between { } 
curly brackets will not be executed. 


- If the result of the expression is true, the statements between { } 
curly brackets will be executed. 


(condition expression) 


(2) { Statements to be executed if the condition result lead to true. 


* Second: Put (“) for right answer and (x) for wrong answer: 


a Branching: mean JavaScript statements are being executed one 


by one. ( ) 
© If the result of the expression is false, the statements between { } 

curly brackets will be executed. ( ) 
© To check the condition expression, we will use Function. ( ) 


O if (total = 50) then the result of (total >= 50) expression leads to 


true. ( ) 
© Weare using Text box element, to enter the total degrees. ( ) 
© To check the condition expression, we will use IF statement. 

( ) 

@ Condition is expression that must be evaluated first and lead to 

true or false. ( ) 
6 If (total = 200) then the result of (total <200) expression leads to 

true. ( ) 
6 Branching is execute or non-execute some of JavaScript 

statements according to condition expression result. ( ) 


® all JavaScript statement within <head>...</head> tag 
implemented automatically. ( ) 


* Third: Complete the following sentences from a, b,c, or d: 
er is execute or non-execute some of JavaScript statements 
according to condition expression result. 
[a] IF [b] Branching {c] True {dj Condition 


© If the result of the expression is ........, the statements between 
curly brackets will be executed. 
ja] IF [b] Condition Jc] true {dj false 


Oo. is expression that must be evaluated first and lead to 
true or false. 


[a] IF [b] Condition jc} true {Įad] false 
@ We will use ......... statement to check the condition expression. 
[a] IF [b] Condition fc} true [a] false 


© If the result of the expression is false, the statements between ..... 
curly brackets will not be executed. 


fa] /..../ |b] #.... # he * .3.'* {dj {....} 
Gir (total = 50) then the result of (total <= 20) expression leads to: 
[a] IF [b] Condition jc} true ja) false 


* Fourth: Write scientific concept for each of the following 
sentences: 


@ Is execute or non-execute some of JavaScript statements according 
to conditional expression result. 


© To check the condition expression. 
© Expression that must be evaluated first and lead to true or false. 


© Execute or non-execute statements according to specific result. 


N/A 
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© Write an HTML tag for displaying a button within webpage. 
cess manana type="button"> 

®@ Write an ‘onclick’ attribute to this button. 
<input type="button"  ............0++5 =""> 


* Fifth: Complete the next steps to call any function: 


© write a function name as the value of that attribute (onclick). 
<input type="button" ....... ="function name you need to call"> 


© Function can be executed when a button clicked. 
<input type="button" onclick="country( )" . .="click me"> 


* First: Write the scientific term to the following statements: 


@® Execute or non-execute some of JavaScript statements according 
to condition expression result. 


®© A statement will be used to check the condition expression. 


* Second: Put (v) in front of the correct sentence and (x) in 
front of the wrong one: 
@ [Ff the condition result lead to false, the statements within { } will 


be executed. ( ) 


@ If total = 100 then the result of (total >= 100) expression leads to 
true. ( ) 


Preparatory question for the next topic: 


- When you enter a data in the Form Field, 
- How can you check if this field leaved enpo 


* First: Re-Arrange the following steps to add a Text data field: 
) Save the text file in extension .htm. 


) <Input type = "text"> 
) Create a new text file, using Notepad program. — 
) Open the file in the Internet browser. 
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) Type the following tags within the <form> 

* Second: Matching from column (A) for column (B): 
l <Input type = "radio"> A | To add a text box. 

(2 | Anpu ope = "submits | B [Toadda Checkbox | 
a| aopean |D [Toaddabuon | 
[5 | Aput ype = "eheokbont> | E [To add a Radio baton | 


* Third: Put (v) for right answer and (x) for wrong answer: 


© Each HTML statement must end with "Semi-colon" (;),  ( ) 
@ To prevent the user from choosing all available options, use the 
attribute "name", ( ) 


© Reset button is used to send the form data, which you have entered 
using the form elements to another webpage. ( ) 


© document.write( ) statement used for displaying a message via a 
dialogue box. ( ) 


© shows the symbol (*) when you type a password in order to hide 
the true password components. ( ) 


TE Questions 2 Fae] 
* Fourth: Write scientific concept for each of the following 
sentences: 


@ Statement used for displaying a message via a dialogue box. 
@a language isn’t enough to make a confirmation to the data entry. 
© An attribute used to add a text on the button. 


O Is JavaScript statements grouped together in named block and 
performed according to call it. 


© Each JavaScript statement must end with it. 


* First: Complete the next steps to create a webpage displays 
"computer my favorite subject" text as its content: 


© Create a Co) Ee ee ye file. 


ee ("computer my favorite subject"); 
© Save the text file with ..........006.. extension. 


8 Open the HTML document in an available ................ 


* Second: Write scientific concept for each of the following 
statements: 
© Statement is used for displaying text within a webpage contents. 


@ It is used to clear all data fields, which you have entered and 
a return to the default values of the controls. 


Oa language is used to make a confirmation to the data entry. 


@ Is execute or non-execute some of JavaScript statements according 
to condition expression result. 


6 All JavaScript statement within tag implemented automatically. 


* Third: Complete the following statements from between the 
brackets: 


@ Submit Button is used to send the form data, which you have 
entered using the form elements to another webpage, assigned by 
kxaweinmrenene attribute value of the form. 

(A radio button - action — function - The password) 


M pee field, use to enter the password to a webpage via 
keyboard. (The password — Button - function - action) 
© The user can click on ......se0000 to achieve or execute JavaScript 


function such as clear or save entered data within the form. 
(function - action -Button - The password) 
O ir you want JavaScript statements within <script>...</script> tag 


to be implemented when an event occurs (such as button click), you 
APOE NBOD: cnsaciccncanonsnne 


(function - action - A radio button - Button) 
ee , by which the user can select one of a limited number 
of options such as your gender (male / female). 
(function - action - Button - A radio button) 
* Fourth: Put (v) for right answer and (x) for wrong answer: 


a JavaScript commands and instructions (Statements) are 


written within HTML tags. ( ) 
© The letter case must be considered while writing JavaScript 
statements. ( ) 


© Through the Textbox element, we add a group of elements to a 
webpage such as buttons and fields. ( ) 


© To check the condition expression, we will use IF statement.( _) 


© To create a function, write word IF and followed with its suitable 
name. ( ) 


* First: Choose the correct answer from between the brackets: 


@ We use <form> .... </form> tag 10 CrS ania TE 


(form — Interactive — Text Box — Static) 


©... use to enter the password to a webpage via keyboard. 
(Text Box — form — Interactive — Password field) 
© We must save the text file with ........0...0.0e0. extension. 
(Jav — htm — doc — txt) 
© A statement will be used to check the condition expression. 
(Branching — Interactive — Text Box — If statement) 
© Create... webpage through which you can enter your 
personal data through a Form data input elements. 
(Password field — form — Interactive — Static) 
© Execute or non-execute some of JavaScript statements according 


to condition expression result. 
(Branching — Interactive — Text Box — statement) 


* Second: Select from (B) that matches with other from (A): 


Column (A) Column (B) 


<input type = "reset"> 


2 | <input type = "radio"> 


3 | <input type = "submit"> 


ee | 


5 | To add a text on the button 


GH 
Wy 
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* Third: Put (v) in front of the correct sentence and (x) in 
front of the wrong one: 
oO JavaScript commands and instructions (Statements) are written 


within <script></script> tags. ( ) 


@ HTML language is enough to make a confirmation to the data 


entry. ( ) 
© If the condition result lead to false, the statements within {} will 
not be executed. ( ) 


© Each JavaScript statement must end with a semi-colon (;) 
character. ( ) 


© Document.write statement used for displaying a message via a 
dialogue box. ( ) 

© If total = 50 then the result of (total <50) expression leads to 

Fale. ( ) 

© Radio button Allows you to choose an alternative or more at the 
same time. ( ) 

8 Photoshop program is used to create a text file with htm 
extinction. ( ) 

* Fourth: Complete the following sentences: 

@ The attribute" ........... "used to prevent the user from choosing 
more than one option. 

Je allows visitors of the web page to enter password data, 
via keyboard. 

= used to select only one of a limited number of options 
such as your gender (male / female). 


4) Through the Form we add a group of elements to a ................. 
such as buttons and fields. 


Fourth — 
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Validate data entered into web page 
OBJECTIVES 


By the end of this topic, students should be able to: Za 


(1) Discuss validation of the data to be entered into a webpage. 
(2) Enter data into a webpage form fields. 
(3) Participate his schoolmates in entering data to an interactive 


webpage. 


IID 2 S Tones ti 
Validate data entered 
into web page 


- After you’ve finished learning basics of JavaScript language, 


you will use JavaScript language to set an interactive webpage 


that validates your entered data. 


Data validation | 


- Validates entered data is controlling entered data. 


- In the pervious activities you created a lot of controls to input 
your data. 


- Discuss with your colleagues that after Form submitted, can 
you: 


(1) Leave the data field empty. 
(2) Type any number of characters in textbox. 
(3) Type a different password in the textbox. 
(4) Type any data type in data field. 
- You can observe that these data fields accept data without any 
validation. 
- There are ways to avoid these defects. 


- You can avoid these defects as following: ~ 


Required Field 


- Create a webpage in which we can see a Form with these _ 
elements: 


(1) Textbox to enter student name. 

(2) Submit button and set value attribute to be "send" to submit 
the Form data to get this: 

(3) If submit button clicked without typing student name, an 
alert box will be displayed to inform us that this field is 


required. 


Execution: 
<form name="form1" action="data.php"> 
Student name 
<input type="text" name="textl"> <br><br> 
<input type="submit" value="send" onclick="return f1()"> 
</form> 


pte 


“if (forml text! nA 


alert ("required field"); 
return false; 


| 


</script> 


p Explanation: 


(1) To add a Form element to webpage, you can use the 
following tag: 
w — t > 
i <form name="form! T Í action= requiredl.htm"> | 

- The name attribute specifies a name used to identify the form. 

<form name="form1" 

- The action attribute defines the action to be performed when the 
form is submitted. Normally, the form data is send to a webpage 
on the server when the user clicks on the submit button. 

action="required1.htm"> 


WY SS) 
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(2) To add a textbox to webpage, you can use the following tag: 


fAtnenneeeneeeeeeeseneeeeeeeeeeneeeeeeeeeeeseeeeneeeenenene rosessssesesereasssssreerereessesessssstereesasas 


: <input type="text" į name="text!"> } 


Seaveeeeeescenesssecceenecseeeseceenenceeersccsseerecersneed — Beseenerereeneneaseneseeeuseserereesereceaeenenes 


- The name attribute specifies a name used to identify the 
textbox. name="text1"> 
(3) To add a submit button to webpage, you can use the 
following tag: 


seeaenesesecsaeeseeeeeeeeeseseseneneeeeeeeeeseeeseee seen ee eneeey BELEEEEEEAEDEESE OSES OE OESSEREREREEEREEEEL, JOEEEEEEDEESESESEDESEEEESOEEESESIGEEEREEEEEEA DEEL ELSE ERA ESESESEREO ES 


‘<input type="submit" : i value="send"?! : onclick="return fl ( "> 


, STEET s ENL a NIE R NE ROES, EET E EE TEN EE E Prrrrrrrrtrettrtrtrititittitiriiirritiiii iii os 


- The value attribute specifies the caption for a button. 
value="send" 


- The onclick event occurs when the user clicks on a button. 
- Specifies the JavaScript statements or function name (here the 
function is fl ( )) to be executed. onclick="return f1( )"; 


(4) To create f1( ) function that will be called or executed on 
neuen clicked, we use the following code. 


Necceeeeeeecererererenenersreesrseseseneeenerereeaeseeeaaneeaeand 


seeeenensrsseeesescsceesesenenseceeeeeonsnsrererensnsnsasenenanerenenenennneneee 


- To check that the field was not left empty, we use the tinct 
condition: 


PUPeveneenennaneneenerneneenenennneneseneeeeneeeese en estes eee ee een Osean enseeeeaeneennesenen 


jPrrreretrrtrettrtetrtrittirtrtritittririitiririiiii terrors 
} Seerererrertrererrrrtrterrrtrrtritrtrrirrrirtrirtrettrirttir itt iri 


- JavaScript language is used to validation of the data to be entered 
into a webpage. 

- Data validation is the process of ensuring that user input was 
checked. 

- Ensuring that the user didn’t leave the field empty is one of the data 
validation methods. 

- To check that the field is not left empty, we use the following 
condition: if (form1.textl.value==" "){ 


* First: Put (v) for right answer and (x) for wrong answer: 


© Data validation is the process of ensuring that user input was 


checked. ( ) 
@ HTML language is used to validation of the data to be entered 

into a webpage. ( ) 
© You can Leave the required data field empty. ( ) 
© To return false if the textbox was left empty: Return true; ( ) 
© submit button is used to enter student name. ( ) 
© Weare entering data into a webpage form fields. _ ( ) 


* Second: Write the function of each of the following codes: 
® Function PS sxcaaxgenmvesereceneaeewgucsssiesnik e Ricdianeektine 


(2) <input type="text" name="textl"> ...........ccccecececeecececeeceees 
© <onclick="return Fh) ase A E RAE. 
© alert BD Set a EE E EE EERE EN 


®© <input type="button" value=" "sum"> ........0..0...cccceceeeceeeee ees 


Column (A) 


ey function f1() 
if (form1.textl.value=="") { e 


3 | return false; 


Defines the action to be 
performed when the form is 
submitted. 
To display the alert box with 
"required field". 


k, l A will be called and executed 
alert ("required field"); D| when command button clicked 
action="required1.htm" E| pe that the field was not 


* Fourth: Complete the general formula of conditional sentence 
from between the brackets: 


RN e aa to enter student name. 
(verification - onclick - static - textbox) 
@ value="send": the value attribute specifies the ........ for a button. 
(textbox - caption - submit button - reset button) 
© we can not leave the ............ empty. 
(interactive field - static field - input field - required field) 
@ Data.......... is the process of ensuring that user input was 
checked. 
(validation - dynamic - input - return) 
© To check the content of textbox that is found in the Form form] 
through hersis attribute. 
(input - type - value - text1) 


Preparatory question for the next topic: 2 


- When you enter data into the form fields. 
- How can you make the data field receive only numerical data? 


Fifth Topic 


Continued to validate data entered into web page 


Ve 


(1) Discuss validation of the data to be entered into a webpage. 


OBJECTIVES: 
By the end of this topic, students should be able to: 


(2) Enter data into a webpage form fields. 
(3) Participate his schoolmates in entering data to an interactive 
webpage. 


Seeiecieiienene 


PAA Fae] 


Continued to validate data 
entered into web page 


saa J Data validation 


- Create a webpage in which we can see a Form with the 
following elements: 


(1) Textbox for password input. 

(2) Submit button for form data submission. 

- An alert box will be displayed on submit button clicked, if the 
entered data was less than the minimum allowed length (8 


characters). 


<html> . 
<head> 
</head> 
<body dir ="rtl"> 

<form name="form1" action = "data.php"> 
<input type="password" id ="text1"> 
<input type="submit" value="send" onclick="return LLG > 
</form> 


nupte 


aPereresensessanseesereesssversrssteseessesepeesesevenecenesensseonssosersereseven: seetapnesacuseeuseseneveseuvesesuniannveceenevevereuenssnesssseeeterengg, 


Í function fl () { 


| : if (form1.text1.value.length<8) { 


alert ("minimum allowed length 8 characters"); | | 


Ae ee ereseseesseseserseeoese’ 


_ : return false; 


parerperorcecwesreseeootoucsocensensenvensoesoceresovesssosseseensensscossceaseceesesssessesosasbacosessentpoosecsessesorsosesonesestonseecacesesver 


The similarities and differences between this code 
and the code of the pervious example. 


* Explanation: 


(1) To set the direction of the webpage content from right to left. 


<body dir ="rtl"> 


Oy 
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(2) To add a Form element to webpage, you can use next tags: 
<form name="form1" | | action = "data.php"> 
- The name attribute specifies a name used to identify the form. 


— It 


<form name="form1" 

- The action attribute defines the action to be performed when the 
form is submitted. Normally, the form data is send to a webpage 
on the server when the user clicks on the submit button. 

action=" data.php"> 

(3) To add a textbox to webpage to enter password, you can use 

the following tag: | <input type="password" 

- The id attribute specifies a name used to identify the textbox. 

id="text1"> 


' 


(4) To add a submit button to webpage, you can use the next tag: 
<input type="submit" 
- The value attribute specifies the caption for a button. {value="send"| 
- The onclick event occurs when the user clicks on a button. 
- Specifies the JavaScript statements or function name (here the 
function is f1( )) to be executed. | onclick="return fl()"> 


(5) To create f1( ) function that will be called or executed on 
button clicked, we use the following code. | function f1() { 


(6) To verification if the entered data was less than the minimum 
allowed length (8 characters), we use the following tags: 


if (form1.textl.value.length<8){ 
(7) To display the alert box with "message": 


alert ("minimum allowed length 8 characters"); 


(8) To return false if the entered data was less than the length 
8 characters: | Return false; 


en | 77 


Data validation 
= Third: = Matching the data entered in the two fields 
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- Create a webpage in which we can see a Form with the 
following elements: 

(1) Textbox for password input "enter password". 

(2) Textbox for re-enter password input "re-enter password", 

(3) Submit button for form data submission. 

- Comparing the content of the two fields, in the case of 
mismatch the contents show a warning message "The two 
values do not match". 


hod dir ="rtl"> | 


<form name="form1" action = "data.php"> 


<input type="password" id="text1"> 
re-enter password 
<input type="password" id="text2"> 


password 
<br> | 


<input type="submit" value="send" onclick="return f1( )"> 


</form> 


<script> | 
QO l function fl (){ | 
g : : if (form1.textl.value!==form1. Text2. value) { 
(8) alert ("The two value do not match") ; 
© return false; 
MA ern eer ee ES 
| | 
</script> | 
“bodya | 
— m A 


| The similarities and differences between this code 
and the code of the pervious example. 


ie Explanation: 


(1) To set the direction of the webpage content from right to left. 


Al acs 


- The name attribute specifies a name used to identify the form. 


<form name="form|" 


- The action attribute defines the action to be performed when the 


form is submitted.) action = "data.php"> 


(3) To add a textbox to webpage to enter password, you can use 


the following tag: 
- The id attribute specifies a name used to identify the textbox. 
(4) To finishing the current line and start a new line: 
(5) To add a submit button to webpage, you can use the next tag: 
| 
- The value attribute specifies the caption for a button. |value="send"| 
- The onclick event occurs when the user clicks on a button. 
- Specifies the JavaScript statements or function name (here the 
function is f1 ( )) to be executed. | onclick="return f1( )"> 


(6) To create f1( ) function that will be called or executed on 


button clicked, we use the following code. | function f1() { | 


(7) To comparing the content of the two fields, in the case of 
mismatch the contents show a warning message, you can use 


the following tag: 


if (form1.text1.value!==form1. Text2. value){ 


(8) To display the alert box with "The two value do not match": 


alert ("The two value do not match"); 


(9) To return false in the case of mismatch the contents of the 


two fields: | Return false; 


Data validation 
Prevent the user from entering type 


<H 
Q 


= Fourth 


- To prevent the user from entering type of data that 
different of field data type: 


A 


- Create a webpage in which we can see a Form with these 
elements: 

(1) Textbox for data entry. 

(2) Submit button for form data submission. 

(3) Check data type of data entry, in the case of enter non- 
numeric data show a warning message "enter a numeric value 


" 
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<body dir ="rtl"> 
<form name="form|" action = "data.php"> 
<input type="text" id="textl"> 
<input type="submit" value="send"_ onclick="return f1()"> 


</form> 


| if (sNaN(form1.text1.value)) { 


: alert ("enter a numeric value") ; 


: return false; 


</script> 
</body> 


The similarities and differences between this code 
and the code of the pervious example. 


— Remember _ 


- Data validation methods: 
(1) Defining the minimum allowed length for the input field. 
(2) Matching the data entered in the two fields. 


(3) Prevent the user from entering type of data that different of field 
data type. 


* First: Put (V) for right-answer and (x) for wrong answer: 


© To check the data entered, use the html language. - ( ) 
@ <body dir="rtl"> tag, ig used to determine the direction of the 
webpage contents from right to the left. ( ) 
© From cases of data validation, leave the data field empty. ( ) 
© We used f 1(){ tag to delete fI( ) function. ( ) 
© Defining the minimum allowed length for the input field from 
cases of data validation. ( ) 
© Submit button is using for form data submission. ( ) 


© To verification if the length of data entered within a textbox is less 
than or equal to 8 characters, we use the following command: 
if (form1.text].value!==form1.Text2.value){ ( ) 


* Second: Choose the correct answer from a, b, c, or d: 


O The length of data entered within a textbox is less than or equal to 
8 characters: 


(a) if (form1.text1.value!==form 1|.text2.value) 
(b) if (isNaN(form1.text1.value) 
(c) if (form1.text1.value.length<=8) 
(d) if (form1.text1.value=="") 

© Prevent the user from leave the field empty: 
(a) if (form1.textl.value!==form1.text2.value) 
(b) if (isNaN(form1.text1.value) 
(c) if (form].text1.value.length<=8) 
(d) if (form1.textl.value=="") 


i 2 


& Prevent the user from enter a non-numeric data: 


Topic 5. 


(a) if (form1.text1.value!==form1.text2.value) 
(b) if (isNaN(form1.text1l.value) 

(c) if (form1.text1.value.length<=8) 

(d) if (form1.text1.value=="") 


© To match the password values, we can use the condition: 
(a) if (form1.textl.value!==form1.text2.value) 
(b) if (isNaN(form1.text1.value) 
(c) return false; 
(d) if (form1.textl.value=="") 


© To return false as a function returned value in the case the textbox 
is leaved empty, we used return false; 
(a) if (form1.text1.value!==form1.text2.value) 
(b) if (isNaN(form1.text1.value) 
(c) return false; 
(d) if (form1.text1.value) 


* Third: Matching from column (A) for column (B): 


Column (A) Column (B) 


D Function f1(){ Prevent the user from enter a 
non-numeric data. 


To specify the webpage to 
which the submitted data will 
be sent. 


isNaN(form1.textl.value) 


— tI 


<input type= 


* Fourth: Complete the followingsentences from between the 
brackets: 
(Text Box - value - Name - Reset Button - Radio buttn 
- Reset Button) 


@ The attribute ".............. "used to prevent the user from choosing 


more than one option. 


allows visitors of the web page to enter password data, 


via keyboard. 


used to select only one of a limited number of 
options such as your gender (male / female). 


OE is used to clear all your data, which you have entered 


using the form elements. 
(5) Used the attribute "............. "to add a text on the button. 


© When pressing on ...... , can perform many functions; such as load 


a function, or store your data, or delete your data. 
* Fifth: Matching from column (A) for column (B): 


Column (A) | Column (B) 
A language is used to create a 
a Checkbos text file with htm extension. 
2 — To select your proficiency 
language(s). 
HTML c An attribute is used to add a text 
on the button. 
; À m A button is used to send all form 
SEEE PO D» data to other webpage. 
5| Submitbuton jE To add a password field to the 
webpage 


v3 


* First: Complete the following sentences: 


Cases of data validation are: 


© Leave the data field empty. 
@ ee eeeeeeeeeee hhh hhh hhh PPP PPP PERCE EEE EEE EES 
(3) eeeeereeneee LARES EEE] eeeeene SHEET ERROR ETOH RTE eee eee eee 


(4) EEEE EEE] LEE EEE EEJ SCHR eee eee eee ee ee PER RRRE REP EREEEE SERRE REE LILLE EEE 


* Second: Put (V) in front of the correct sentence and (*) in 


front of the wrong one: 
@ To match the password values, we can use the folowing condition: 
form1.textl.value=="" ( ) 
@ We add action attribute to <form> element for specify the 
webpage to which the submitted data will be sent. ( ) 
© To create f1() function, we used f1(){ ( ) 


(4) To return false as a function returned value in the case the textbox 
is leaved empty, we used return false; ( ) 


© To verification if the length of data entered was less than or equal 
to 8 characters: form] .text1.value.length<=8 ( ) 


(6) To check that the field was not left empty, we can use the 
following tags: form|.textl.value!==form|,text2.value  ( ) 


@ To check if the user entered a non-numeric data, we can use the 
following tags: isNaN(form1,text].value) ( ) 


Preparatory question for the next topic: 


- When we create a webpage: 


- How can you validate the form da ta? 


Sixth Topic 


OBJECTIVES: 
By the end of this topic, students should be able to: 
(1) Create an interactive webpage. 
o (2) Develop an interactive webpage. 
(3) Compare between the static and interactive webpage. 
(4) Appreciate the importance of markup language HTML and 
JavaScript language in creation of an interactive webpage. 
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Project 

Data validation in the registration webpage ) 


- After you have learnt how to validate input data, complete your 
previous project (my school) and add a registration webpage. 


© Male © Female 
Language 
E] German |V] Engish [F] French 


- The validation process can include: 

(1) Prevent user from leave textbox empty (required field). 

(2) The minimum length allowed for the password field is 8 
characters. 

(3) Matching the data of the two password fields. 

(4) Prevent user from enter a non-numeric data into the age field. 


The final illustration of my school website pages 


MF] Note: 


- After save button is clicked, data validation process is done. 


- Then it will be saved and returned to login webpage (which we 
will learn later on) for finishing registration and enter the home 
webpage using the name and password that were last be saved. 


C2) 
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HTMLS5.- 


- It is a new version of the HTML language. 


- It appeared in 2014 and has many improvements that are 
evident through the use of a range of new tools to facilitate the 
idea of designing a webpage. 

- The Internet browser programs such as (google chrome, internet 
explorer, Firefox) do not fully support the implementation of 
the new tags of HTML5. 

- So the browser required for the implementation of each tag will 
be determined. 

- There are many new Form tools used for input data such as: 

(1) Color input field. 

(2) Date input field. 

(3) Number input field. 

(4) Required attribute of text input field. 


Color Input Field 


- Through color input filed, the user can select a color as his 
input data from a color picker. 

- To add a color picker as an input field to the webpage, you can 
use the following tag: 


<input type="color"> 


- Do the following: 
(1) Create a new text file. 
(2) Write the following HTML tags. 


<form> 
Choose your favorite color 
<br> 


<input type="color"> 


</form> 


(3) Save the file with .htm extension. 


ae this input type is supported in Google Chrome. 
(4) Open the HTML document in Google Chrome browser, and 
the webpage will be shown. 
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Date input field | 


r 


- Date input field: by which the user can select a date value from 
date picker (calendar). 


- To add a date picker as an input field, you can use the following 
tag: <input type="date"> 


- To appear a date box within the web page to choose the 
required date do the following: 


(1) Create a new text file. 
(2) Write the following HTML tags. 


<form> 
birthdate 


<br> 


<input type="date"> 


</form> 


(3) Save the file with .htm extension. 


ie} AGICS this input type is supported in Google Chrome. 
(4) Open the HTML document in Google Chrome browser, and 
the webpage will be shown. 


Al Foes 
Number Input Field | 


a en 


- By creating a numeric input field, you can also set restrictions 
on what numbers are accepted to a certain range. 


- To add a number as an input field, you can use the following 
tag: <input type="submit"> 


- Appear the number tool inside the web page for use in the 
introduction of numerical values, between 1 and 20. 


(1) Create a new text file. 
(2) Write the following HTML tags. 


<form> 
* Enter a number from | to 20 
<br> 
<input type="number" min="1" max="20"> 


<input type="submit"> 


(3) Save the file with .htm extension. 


He] Note: this input type is supported in Google Chrome or 
Firefox, 


(4) Open the HTML document in Google Chrome browser, and 
the webpage will be shown. 


(1) You can type a number or click arrows button to increase or 
decrease a value. 


(2) After you’ve typed a number, submit the form data through 
the “submit button” in order that the browser checks an 
entered value, if it was a non-numeric value, a warning 
message will be displayed to inform you that you must enter a 
numeric value. 


(3) If an entered value isn’t in an available range, a warning 
message will be displayed to inform you that the value must 
be in an available range. 

- On opening the HTML document in an available internet 

browser, the webpage will be shown as follows: 


Enter a number from 1 to 20 
[ss__— ai ub query | 


Please select a value that is no more than 20. 


Al Fae=)) 


- If required attribute is added to any input field such as (text, 
password, date, number, checkbox, radio, ... etc.). 

- The browser forces the user to input this field because it is a 
required field and the form submission is not completed. 


Activity 


(1) Create a new text file. 
(2) Write the following HTML tags. 


<input type="text required"> 


<input type="submit"> 


(3) Save the file with .htm extension. 


Me] Note; this input type is supported in Internet Explorer. 


(4) Open the HTML document 
in Internet Explorer browser, See ‘ak Mas Pavciees Todi 
and the webpage will be shown. 


| Notice: 


- After you’ve clicked on submit button without entering any 
data in a required text field, a warning message will be 
displayed to inform you that this field is required field. 


- HTML5: It is a new version of the HTML language; it appeared in 
2014 and has many improvements that are evident through the use of 


a range of new tools that facilitates the idea of designing a web 
page. 

- There are many new Form tools used for input data such as: 

(1) Color input field. 

(2) Date input field. 

(3) Number input field. 

(4) Required attribute of text input field. 


* First: Complete the following steps to add a date picker as 
an input field to the web page: 


a} Cent 8 BBW sN DAES 


© write the following ......-.--- tags 
(3) Re E E sin eee > 
birthdate 
& <input type = A essissssissazues "> 
</form> 
© Save the file with ............ extension. 
ee the HTML document in Google Chrome browser. 


ma ‘A 


* Second: Re-Arrange the following sentences to add a color box 
(color) inside the web page. 


) Save the file with .htm extension. 

) Open the HTML document in the Google Chrome. 
) write the following HTML tags within <form>. 
) <input type = "color"> 

) Create a new text file. 


A ee EE ce, TE ee TE ce 


* First: Write the scientific term to the following statements: 


@ A new version of HTML language that has new elements for 
web design. 

© An attribute that if added to any input field made this field 
required. 

© An input field was added to a webpage to enable user to enter 
a numeric value in a range. 


* Second: Select from (B) column that matches with other from _ 
(A) column 


Column (A) Column (B) 


<input type="date"> Add a color picker to webpage. 
typ 


<input type="number"> i] Add a date picker to webpage. 


3 | <input type="color"> 


Add a number input field. 


Preparatory question for the next topic: | 


- When your interactions with Web sites online: 
- How do you use the Internet sites and services in? 


* First: Put (v) for right answer and (x) for wrong answer: 


@ HTML commands and instructions are called Statements. ( ) 


© If the result of the expression is false, the statements between 
| .... | curly brackets will not be executed. ( ) 


© Condition is expression that must be evaluated first and lead to 


true or false. ( ) 
Or (total = 70) then the result of (total = 70) expression leads to 
false. ( ) 
© The message text must written within double high quotations [" "]. 
( ) 
* Second: Arrange the following steps to call a function: 
( ) Write a function name as the value of that attribute onclick. 
( ) Write an HTML tag for displaying a button within 
webpage. | 
( ) Write following code: 


<input type="button" onclick="country( )" value="click me"> 
( ) Write an onclick attribute to this button. 
* Third: Write the scientific term to the following statements: 
© Used for displaying a text within the webpage contents. 


@ The language used to make your registration webpage to 
interactive. 


© itis JavaScript statements grouped together in a named block and 
performed according to call it. 


© Used for displaying a dialogue box with message to the user. 


© It is used to check the condition expression. 


* Fourth: Matching from column (A) for column (B): 


To display the alert box with 
"required field". 


To return false if the textbox 


was left empty. 

Defines the action to be 
performed when the form is 
submitted. 


action="required1.htm" 


if(form 1 .text1.value!==for 
m1.text2.value) { 


@ We usea“... ” attribute for writing a text on a button. 
(onclick - Function name - name - value) 

© The form name is given form through the attribute ................. 
(onclick - Function name - name - value) 

3] Addini 8 .ocescceneses attribute to the button element for is called a 


function. 
(onclick - Function name - name - value) 


© Onclick attribute value is ....cccccccscssssssssscseee required invoked. 
(onclick - textbox - name - value) 


© For POAGING: aA content using JavaScript language, you 
should give a name to.the <form> element and give a name to the 


textbox. (onclick - textbox - name - value) 


À A ~ N 
RO 
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* Second: Put (v) for right answer and (x) for wrong answer: 
© We will use Function to check the condition expression. ( ) 


k2} Branching is execute or non-execute some of JavaScript 
statements according to condition expression result. ( ) 


®© JavaScript commands and instructions (Statements) are written 


within HTML tags. ( ) 
(4) alert( ) statement is used for displaying text within a webpage ` 
contents. 3 


9 JavaScript statements are written inside <html> </html> tag.(  ) 
* Third: Matching from column (A) for column (B): 


Column (A) Column (B) 


fonction fi A To check if the user entered 
a non-numeric data. 


will be called and executed 
when command button 
clicked. 


3 | if (isNaN(form1.textl.value)) os used for displaying text 
within a webpage contents. 

4 | sadn tutor used to validation of the data 
to be entered into a webpage 
by which the user can select 

5 | Document.write( ) statement one of a limited number of 
options. 


* Fourth: Arrange the following steps to create a webpage that 
displays a dialogue box with message "welcome" when loading: 
( ) Save the text file with .htm extension. 

( ) Create a new text file. 

( 

( 


2 | JavaScript language 


) Open the HTML document in an available internet browser. 
) Write the following HTML tags, alert ("welcome"); 


J 
Ty 
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* First: Put (v) for right answer and (x) for wrong answer: 
® alert( ) statement used for displaying a message via a dialogue 


box. ( ) 
@ir (total = 100) then the result of (total < 50) expression leads to 

True. ( ) 
© If the result of the expression is false, the statements between 

curly brackets will be executed. ( ) 
© Each statement must end with a semi-colon (;) character. ( ) 


@ JavaScript language is case-sensitive, so the letter case (small or 
capital letter) must be considered while writing JavaScript 
statements. ( ) 

* Second: Choose the correct answer from between the brackets: 


© The textbox name is given textbox through the attribute ......... 
(name - form1.tl.value - JavaScript - <script></script>) 
(2) JavaScript statement is written inside ssssssssssssssusssessssssussos: 
(name - form1.tl.value - JavaScript - <script></script>) 
Or YOR Wanie statements to be implemented when .:a 
event occurs (such as button click), you should use a function. 
(name - form1.tl.value - JavaScript - <script></script>) 
© We can use the value of the textbox | o Paa. 
Statement. 
(Function - form1.tl.value - JavaScript - <script></script>) 
PENETER is JavaScript statements grouped together in a named 


block and performed according to call it. 
(Function - form1.tl.value - JavaScript - <script></script>) 


* Third: Arrange the following steps to create a webpage 
displays "computer and information technology subject" 
text as its content: 

( ) document.write ("computer and information technology 
subject"); 


) Save the text file with .htm extension. 

) Create a new text file. 

) Open the HTML document in an available internet browser. 
) Write the following HTML tags. 


Pe m m 


Column (A) 


Column (B) 


The length of data 


* Fourth: Matching from column (A) for column (B): 
' m P entered within a textbox 
<input type="color"> 


: 
if (form1.textl.value.length<=8) i 
a 


webpage. 
4 | HTML5 Add a number input 
field. 
<Gnyut type="namber> £ Add a date picker to 
webpage. 


is less than or equal to 8 
characters. 


A new version of HTML 
nguage. 


Unit Three 


] 
fe ty 


(1) Identify the internet Safety concepts. 

(2) Identify the different information technology Safety concepts. 

(3) Identify the intellectual Safety sides, cultural, ethical, social 

and religious, concerning the usage of information teolinology: 
and communication. 


nterne SAA | 


OBJECTIVES: 
By the end of this topic, students should be able to: 
(1) Identify the common idioms used on the internet (identity 


theft — malware — spyware). E 
(2) Mention as amnay ideas as possible concerning y Kona, | 


the users of the internet. e | 
(3) Design a digital image about malusage of internet. 
(4) Explain the instructions of internet Safety. 
(5) Appreciate the importance of internet Safety in our life. 
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Internet safety 


* The internet is one of the most important means of 
communication in all fields. It is important to focus on the 
dangers that result from this usage. 

* There are vary dangers such as virus infection, which destroy 
the system data, attack to spoil the user files or harm or, 
blackmail deploy identity or personal data theft and other types 
of dangers. 

* Many people do not know that some information which may be 
considered useless are so important for others. 


- Next: 
- How to deal with some of the situations that may appear during 
internet usage? 


- Some common idioms used on the internet. 


- Dear Student: define the following: 


eo 


Tite tee ee eee ee eee ee ee eee eee ee eee ee eee ee eee ee eee eee eee ee eee 


eee eee eee eee ee eee eee) 


PRE EREEEEEREEEE EE ERE E HEHE EEE E EEE EEE HEE EEEH EEE HEHEHE HERE EHH OL seses 


Tete eee eee eee eee eee eee eee ee eee ee) 


RRR EERE E HEE E EEE E HEHEHE HEHEHE EE HEH HEHEHE HEHEHE EEEE 


EEE EEE EEE EHH EHH EHHEE 


Af, 
YA Fi 


A 
Internet Safety 


Identity theft | 


IDentity 
eee 
i : 
- It is the impersonate of someone or b- R 


using his name or any information 
concerning him for stealing him or theft of others. 


_ Malware | 


- It is parasite programs that sneaks to backdoor computer 


systems. RS 


- The name is derived from Malicious Software. é = 


- To protect your system against them, use antivirus 
programs and update them continually. 


2 
r 


Spyware 


‘i 


- It is computer programs that collect personal 
information of the users without their consent. 


- To protect your computer, you must use anti-spyware programs 
that detect programs like spyware, adware and files that control 
your internet browser. 


Virus 


: 


- It is a small program that can spread itself to 
infect the computer and programs. 


secret codes | 


- They are all the personal data that must not 
be shown to everyone on the internet like: 


username, password or mobile phone number. 


- Search on the internet for programs to protect your 


computer and download them. 


- A student (X) was on Facebook and was talking to unknown 


person ( Y ), during the talk , X sent personal information as 


phone number, personal image and home address. Discuss this 
situation. = Discuss this situation: 


How to deal with some of the situations that may happen 


to you or to one of your colleagues during internet usage? 


- Sometimes the registration is done by the your Facebook user 
name and password to sign up for an application. 

- The user is exposed to stealing his account especially when 
these applications are hacked. 


-= How to deal with this situation? 


- It is better not to sign up for these applications because the 
main objective behind them is not known, especially if the 
registration is to done using the password of your account. 


- If this happened, go and change your password at once. 


Second situation | 


- Some users publish their personal and family photos on social 
media sites. 
Problem that may occur: 


- The user may be exposed to blackmail or defame or deal with 
these photos in an unsuitable way through using image-editing 
programs like Photoshop or so. 


- How to deal with it? 
- Do not publish your personal photos, and when you do make 
sure that you assigned the viewers to your closest friends. 


Lu) 


Third situation | 


- Publishing personal phone number or personal information like 
home address or work place when signing up for a forum or 
creating personal account on social media sites. 


Possible Problem: 


- The user can be exposed to house robbery or kidnapping 
especially young people, when registering uncontrolled. 


- How to deal with this? 


- DO NOT publish your personal information or any information 
concerning the user. 


- It is better to hide this information and control young people 
signing up, not allowing them to publish personal information. 


Fourth situation | 


- Talking to strangers for acquaintance and exchange opinions or 
culture in Facebook, 


Possible Problem: 


- They may be some deceit especially when the others are unreal 
persons. 


- This may lead to dangerous life problems especially when 
publishing family information. 


Lin 


PO 2 nnn enn, Mee sen 
- How to deal with this? 


- Use the social media sites to increase social relationships but 
you have to make sure about the person you talk to and his real 
identity. 


- It is better NOT to deal with strangers using fake names. 


om B 


- Signing up for job online filling in forms with personal details. 


The Problem: 
- There may be deceit by unreal companies through advertising 
unreal job vacancies to just collect personal information and 
building up a database with this, then using the distinguished 


people for certain purposes. 


- How to deal with this? 

- Online application has be well known but you have to take care 
to apply only for authorized companies and make sure they are 
real through knowing their real places. 


- It is better to apply only for official or governmental job 
vacancies online. 
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- The following are some of the important guideline to better 
internet Safety: . 


(1) Keep your username and password secret. 

(2) Think well before publishing your personal photo or sending 
text or sound files or videos on the internet. 

(3) Before publishing anything ask the person before publishing 
his photo or sending their phone number or email address ‘to 
other people online. 

(4) Do not reply to unknown messages or from unknown people. 

(5) Do not add people you do not know to your friend list. 

(6) Do not send messages when angry. 


(7) Not taking any step towards illegal operation is kind of hiding 
the wrong doer. | 
- So tell an adult directly of anything you doubt. 

(8) Learn how to ban people from reaching chat box and print or 
screenshot them to be easy for parents to take the right step 
against them. 

(9) Learn how to ban disturbing messages. 

(10) Know well that online chat is not personal, some others may 

be recording or printing these chats and (publish them later 
on). 


The following idioms are key words for internet search for 
more information about this lesson: ` 


Term Meaning 


: 
Computer 5 Š 


Password 


E 


Phishing lard! sail Contempt 


Leder’! gga jai 
interactive aiei Happy slapping 


television galas 


z 


WA 
~S 
ARN 
ARS 
AS 


Remember PI 


- Internet Safety has many topics like: 
(1) Malware. 
(2) Identity theft. 
(3) Spyware. 
(4) Virus. 
(5) Secret codes. 


- In the situations that may happen to you or your 
colleagues take care of the following: 


(1) It is better not to sign up for some applications whose goal 
is not known. 


(2) Do not publish personal photos and when you do make 
sure they are secret. 


(3) Do not publish personal information either in social sites 
or forums and there should be adult control at home. 


(4) Make sure of the real identity of the people you talk to. 


(5) When applying for a job online, make sure of the real 
information of the companies and it is better to apply for 
official or governmental job vacancies online. 


ee UCSTIONS eum 


* First: Put (“) for right answer and (x) for wrong answer: 


© Internet network of the most important means of communication 
in various fields. ( ) 


@ Malware is a web page on the Faċebook site. ( ) 


Al Faez p Internet VA 


© Virus is small harmful programs that can spread and harm 


computer and programs. ( ) 


© Must reply to unknown messages or from unknown people. 
( ) 


© Bluetooth is parasite programs are programs that backdoor 
computer systems. ( ) 


© web blog, means all the personal data that belong to anyone deals 
with the means of information and communication technology. 
) 
@ To protect your system against Malware, use antivirus programs 
and update them continually. ( ) 


8 Spying: the name is derived from Malicious Software.  ( ) 


* Second: Choose the correct answer from between the brackets: 
© For internet safety, keep your Teo Penes: SI EE T secret. 
(username - password - all of the previous - Facebook) 


@ .......... is a small program that can spread itself to infect the 
computer and programs. 
(Virus - Malware - iol W Identity theft) 


© For.......... do not reply to unknown messages or from unknown 


(Malware - Identity theft - Virus - internet safety) 


ere computer programs that collect personal information 
of the users without their consent. | 
(Identity theft - Spying - Secret codes - Malware) 
© For Internet safety, do not send messages when ............. 
(angry - happy - Secret codes - Malware) 
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* First: Complete the following: 


& Impersonation of someone or using the personal information of 


someone or stealing them is called ...............::.0:0000+ 


2 are computer programs that collect information about 


users to control or watch them. 


EN" are small harmful programs that can spread and harm 


computer and programs. 


© Secret codes are the personal information for technology users 


which must not be shown to anyone like ..................2+2e0sess00e 


ne! Sn ne ee ee 


* Second: What will you do when: 


@ Talk toa stranger to exchange opinions or culture through social 


media programs. 


@ Applying for job online and providing personal information. 


* Third: Put (v) for right answer and (x) for wrong answer: 

® You can publish photos of others or show their phone number 
online. ( ) 

(2) When online do not answer any unknown messages. ( ) 

© Not taking any step against any harm on the internet is kind of 
hiding wrong doers. ( ) 


® Online talk or chat are protected and cannot be copied or printed. 


( ) 
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* First: Write scientific concept for each of the following: 


® Allows visitors of the web page to enter text data, using the 
keyboard. 


@ They are all the personal data that must not be shown to everyone 
on the internet like: username, password or mobile phone number. 


Oa language which used to make a confirmation to the data entry. 
© Anattribute used to add a text on the button. 


8 By which the user can select one of a limited number of options 
such as your gender (male / female). 


* Second: Matching from column (A) for column (B): 


Column (B) 


Column (A) 


<input type = "checkbox"> a a Password input 


A 
If(form1.text1.value!==) B| "Semi-colon" (;). 


<9? To check that the field was 
p= paa not left empty 
Keep your username and To add a Checkbox input 
password secret field. 


š Each HTML statement must From internet Safety 
end with 


* Third: Put (v) for right answer and (x) for wrong answer: 


A 


@ Textbox in which we can type a total of degrees. ( ) 


@ Alret() statement is used for displaying text within a webpage 
contents. ( ) 


& To add a button to the webpage, we can use the following tags: 
<Input type = "button"> ( ) 


SS \ 
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© Submit button is used to clear all data fields, which you have 
entered and a return to the default values of the controls. ( ) 


© Virus is computer programs that collect personal information of 
the users without their consent. ( ) 


* Fourth: Complete the following from between the brackets: 


("Semi-colon" (;) — Identity theft — onclick — false — F unction) 


wat is JavaScript statements grouped together in named block 
and performed according to call it. 


_ is the impersonate of someone or using his name or any 
information concerning him for stealing him or theft of others. 


© Each JavaScript statement must end with ............... 


© 1f the result of the expression is ........ , the statements between { } 
curly brackets will not be executed. 
© The function is called by the ........ attribute. 


* First: Re-Arrange the following steps to add a Submit button: 


) Open the file in the Internet browser. 


) Type the following tags within the <form>. 


( 

( 

( ) Save the text file in extension .htm. 

( ) Create a new text file, using Notepad program. 
( 


) <Input type = "submit"> 
* Second: Put (v) for right answer and (x) for wrong answer: 
© To create a form use <form>....</form> tag. ( ) 


® To add a textbox for enter a student name to a webpage, use the 
following tag: <input type = "password"> ( ) 


© You can prevent the user from choosing all available options, 


using the value attribute. ( ) 
@ The password field, use to enter the password to a webpage via 

keyboard. . ( ) 
© Need branching if the execution or non-execution of orders based 

on a certain condition. ( ) 
* Third: Matching from column (A) for column (B): 


Column (A) | Column (B) 


Used to select one or more 
Reset A | option from a limited number of 
options at the same time. 
eo Comparing the content of the 
two fields. 


4 if(form1.textl.value!== Through it we add a group of 
form1.Text2.value) elements to the web page. 
5 JavaScript commands E Used to clear all data fields to its 
and instructions original state. 


* Fourth: Complete the following sentences: 


0... refer to software or spammed or disturbing sneaks a hidden 
computer system. 

2 statement used for displaying a message via a dialogue box. 

© Attribute eee ) used to determine the number of characters 
within the text field. 

a language isn’t enough to make a confirmation to the data 
entry. 

O itis computer programs that collect personal information of the 

users without their consent. 


[21 J. 


* First: Matching from column (A) for column (B): 
Column (A) Column (B) 


To add a send button to the 
webpage. 


To add a Radio button to the 
webpage. 


i 


l <Input type = "text"> 


<Input type = "reset"> 


<Input type = "radio"> 


To add a text box input field 
to the webpage. 
wail wy To check that the field was 
<Input = "submit"> 
ae Na not left empty. 


* Second: Put (v) for right answer and (x) for wrong answer: 


A 
If(form1.text].value==""){ To add a delete button to the 
webpage. 


©% In a webpage the from element doesn't require sending the entered 
data to the web server. ( ) 

@ (@) symbol will be displayed instead of original text. ( ) 
To prevent the user from choosing or selecting more than one 
option or choice, you can add name attribute to radio input field. 


Pi 
© document.write statement is used to display the alert box with 
"message". ( ) 


To add a text box field in order the user can enter his name, you 
add checkbox field. ( ) 
* Third: Write scientific concept for each of the following: 


@ It is the impersonate of someone or using his name or any 
information concerning him for stealing him or theft of others. 


Ma language is used to create a text file with htm extinction. 

© An attribute is used to add a text on the button. 

© tis parasite programs that sneaks to backdoor computer systems. 
3 JavaScript statements are written inside it. 

* Fourth: Choose the correct answer from fa], [b], [c], or [d]: 


@ If the condition result lead to ...... , the statements within { } will 


be executed. 
[a] false [b] true 
[c] function [d] value 


@ ir you want JavaScript statements to be implemented when an 
event occurs (such as button click), you should use a ........... 
[a] function [b] false 
[c] true [d] value 
B They are all the personal data that must not be shown to everyone 
on the internet like: username, password or mobile phone number. 


[a] name [b] false 
[c] Secret codes [d] function 
ee is JavaScript statements grouped together in a named 
block and performed according to call it. 
[a] name 3 [b] false 
[c] Secret codes [d] function 


OT comparing the content of the two fields: 
[a] if(form1.text1.value!==form1.text2.value) { 
[b] if (form1.text1.value.length<=8) 

[c] if (form1.text1.value.length==" ") 
[d] if (form1.textl.value!== 
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Æ Answer the following questions: 


(1) Write steps to add a Checkbox to a webpage: 
The answer 


(1) Create a new text file, using Notepad program. 


(2) Write the following HTML tags within the <form>. 
<form> 
Select your proficiency languages <br> 


English <Input type = "checkbox"> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser. 


(2) Write steps to add a Button to the webpage: 


_The answer 
(1) Create a new text file. 
(2) Write the following HTML tags. 
<form> 

<input type = "button" value ="ok"> 
</form> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser. 


(3) Write steps to add a Text input field 
to a webpage: 


The answer 


(1) Create a new text file, using Notepad program. 
(2) Write the following HTML tags within the <form>. 

<form> 

Name: 
<Input type = = 

</form> 
(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser. 
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(4) Write steps to add a Password field to the webpage: 


(1) Create a new text file, using Notepad program. 


(2) Write the following HTML tags within the <form>. 


<form> 


<Input type = "password"> 
</form> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser. 


(5) Write steps to add a send button "Submit", to the webpage: 
The answer | 


(1) Create a new text file. 
(2) Write the following HTML tags. 


<form> 


<form action = "process.php"> 
<input type = "submit" value="Submit Query"> 
</form> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser. 


(6) Add a Radio Button to the webpage: 


(1) Create a new text file, using Notepad program. 
(2) Type the following code within the <form>. 
<form> 
male <Input type="radio" name = "a"> 
female <Input type="radio" name = "a"> 
</form> 
(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser. 


OOOO} 
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(7) Add a reset button to a webpage: 


„The answer | 
(1) Create a new text file, using Notepad program. 
(2) Write the following HTML tags within the <form>. 


<form> 
<input type = "reset" value="Reset"> 
</form> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser. 


(8) Determine places of written JavaScript inside HTML file. 


<html> 


(9) Create a webpage that displays a dialogue box with message 


"welcome" when loading. 


_The answer / 


(1) Create a new text file, using Notepad program. 
(2) Write the following HTML tags. 
< Script> 
alert ("welcome"); 
</ Script> 
(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser. 


127 


pA Fae7 


(10) Create a webpage displays "Computer subject is my favorite" 
text as its content. 


(1) Create a new text file, using Notepad program. 
(2) Write the following HTML tags. 
< Body> 
< Script> 
Document. Write ("Computer is my favorite"); 
</ Script> 
</ Body> 
(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser. 


(11) Write the general formula to create a function named "F1": 


function fl( ) { 


Code to be executed 


(12) To test conditional expression, we use if statements, write the 
general formula of condition expression: 


If (Conditional expression) 
{ Statements to be executed if the result of the expression is true } 


* First: Write scientific concept for each of the following: 


O itis computer programs that collect personal information of the 
users without their consent. 


Qa language isn’t enough to make a confirmation to the data entry. 

© It is a small program that can spread itself to infect the computer 
and programs. 

© Used for displaying a dialogue box with message to the user. 

(5) By which the user can select one of a limited number of options. 

* Second: Matching from column (A) for column (B): 

Column (A) | Column (B) 


used for displaying text 
within a webpage contents. 


<Input type = "checkbox"> 


A 
2 | <Input type = "password"> D 
- k To check if the user entered 
3 <Input type = "button"> € 


To add a Checkbox to the 
webpage. 


a non-numeric data. 


4 To add a button to the 
webpage. 
5 | if (isNaN(form1.textl.value)) To add a Password input 
. field to the webpage. 


* Third: Put (vV) for right answer and (x) for wrong answer: 


@ If total = 300 then the result of (total >= 300) expression leads to 
true. ( ) 


B Adding a value attribute to the button element for is called a 
function. ( ) 


© we use a “onclick” attribute for writing a text on a button. ( ) 


O For reading a textbox content using JavaScript language, you 
should give a name to the <form> element and give a name to the 
textbox. ( ) 


ÉS JavaScript statement is written inside <script></script>. ( ) 
* Fourth: Choose the correct answer from [a], [b], [c], or [d]: 
® Each HTML statement must end with ................ 

[a] onclick [b] {.....} 

[c] "Semi-colon” (3) [d] JavaScript 


Oa language which used to make a confirmation to the data entry. 


[a] onclick i: E 
[c] "Semi-colon" (3) [d] JavaScript 

© The function is called by the ........ attribute. 
[a] onclick [b] Textbox input field 
[c] "Semi-colon" (3) [d] JavaScript 


© Allows visitors of the web page to enter text data, using the 
keyboard. 
[a] Length [b] Textbox input field 


[c] password input field [d] JavaScript 


(5) AP anses " used to determine the number of characters 
within the text field. 
[a] Length [b] Textbox input field 


[c] "Semi-colon" (3) [d] JavaScript 
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* The First unit * 


- Create interactive webpage through which you can enter your 
personal data through a From data input elements. 


Form: To create a form use <form> .... </form> tag. 

- Through the Form we add a group of elements to the webpage 
such as buttons and fields, which used to enter data, into interactive 
webpage using the HTML language in order to send to the website 
to storing. 

Add Name field 

- Text data field, allows to the user to enter a string or text data, using 
keyboard. 

- To add a textbox for enter a student name to a webpage, use the 
following tag: < input type = "text"> 


* The following steps for adding a textbox to a webpage: 
(1) Create a new text file, using Notepad program. 
(2) Write the following HTML tags. \ 
<form> 
Name: 


<input type = "text"> 
</form> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in the Internet browser, webpage will 
be shown. 


Add Password field 


- The password field, use to enter the password to a webpage via 


keyboard. 
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- Shows the symbol (*) when you type a password in order à hide the 


true password components. 


- To add a password field to the webpage use the following tag: 
<input type = "password"> 
- You can add the confirm password field, by follow the above steps 
to create the password field. 


Add a Radio Button field . | i 


- À radio button, by which the user can select one of a limited number 
of options such as your gender (male / female). 
- To add a radio button to the webpage, use the following tag: 


< input type = "radio"> 


* Note: There is a problem, you can select the two radio buttons 
(male / female) at the same time, and this a wrong . 


> You can prevent the user from choosing all available options, using 
the name attribute. 


- Add name attribute to all available radio buttons with the same value 


- Give the name, such as "a" for all available radio buttons. 


<input type = "radio" name = "a"> 
Add a checkbox input field Le 


- A checkbox input field by which the user can select more than one 
choice. 
- To select your proficiency language(s), use a checkbox. 
- To add a checkbox to the webpage, use the following tag: 
< Input type = "checkbox"> 
Add a button input field 
- A button is used to performs a specific task. The user can click on it 
to achieve or execute JavaScript function such as clear or 


save entered data within a form. 
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- To aed a button to a webpage, use the following tags: 
< Input type = "button"> 


- In the following code, we will used attribute "value" to assign 
caption to a button "ok". er 
<input type = "button" value ="o0k"> 
- There are three types of buttons, that can be add to a from: 
(1) Button: used to perform a specific task. 
(2) Submit: used to send data. 
(3) Reset: used to clear data. 
- Submit button: is used to send form data, which you have 
entered using the form elements to another webpage, assigned by 
action attribute value of the Form. 


Submit button: The user click this to submit the form data to 
another webpage assigned by action attribute value of the Form. 


- To add a Submit button to a webpage, use the following tags: 
<input type = "submit"> 
- Reset button: is used to clear all data fields, which you lave 
entered and a return to the default values of the controls. 
- To add a reset button to a webpage, use the following tags: 
<input type = "reset"> reset 


* Subject (3): 


Control Action 


Through the Form we add a 
group of elements to the web 
page, used to enter data, in 
order to send to the Web site 
to storing. 


<form> ... </form> 


Gives ability to the user to 
enter a string or text data via 
keyboard. 


Textbox <input type="text"> 


Control Action 


As the same as text field but 
(*) symbol will be displayed 
instead of characters to 
secure a password key. 


Used to select only one 

option (alternative) from a 
limited number of options 
such as (male/female). 


Password 


Radio button | <input type="radio"> 


Used to select one or more 
option (alternative) from a 
limited number of options at . 
the same time. 


<input 
type="checkbox"> 


Checkbox 


Submit 


Used performs a specific task 
such as load a function, or 
store your data, or delete 
your data. 


<input type="button"> 


Used to send your data, 
which you have entered 


: = r 
<input type="submit"> using the form elements to 
another webpage. 


` = Used to clear all data fields 


* The Second unit * 


* Subject (1): 


- To confirm that the entry data is correct; you will need to add a 
JavaScript statements to your webpage document. 
* HTML language isn’t enough to make a confirmation to the data 
entry. 
JavaScript fundamentals: 


(1) JavaScript commands and instructions are called Statements. 
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(2) Sendai commands and instructions (Statements) are written 
within HTML tags. 

(3) JavaScript statements are written inside <script> </script> tag. 

(4) Each statement must end with a semi-colon (;) character. 


(5) JavaScript language is case-sensitive, so the letter case (small.or 
capital letter) must be considered while writing JavaScript 
statements. 


* Places of written JavaScript inside HTML file, at the head of 
webpage and in the body of webpage 


Alert( ) statement 
- Alert statement used to display a message within a message box to 
pay attention for reading. Or alert statement used for displaying a 
message via a dialogue box. 
- To display the message box, we use the following command: 
alert ("the message"); 


- The message must written within quotations marks (""). 


- Next steps to create a webpage that displays a dialogue box with 
message "welcome" when loading. 
(1) Create a new text file, using Notepad program. 
(2) Write the following HTML tags. 
< body> 
< script> 
alert ("welcome"); 


</ script> 
</ body> 
(3) Save the text file with .htm extension. 
(4) Open the HTML document in an available internet browser. 


Document. Write(...) statement 
- Document. Write statement is used for displaying text within a 
webpage contents, on the web page itself. 


- The following steps to create a webpage displays "computer and 
information technology subject" text as its content. 


(1) Create a new text file, using Notepad program. 
(2) Write the following HTML tags. 
<body> 
<script> 
document. Write ("computer and information technology subject"); 


</script> 
</body> 


(3) Save the text file with .htm extension. 
(4) Open the HTML document in an available internet browser. 


* Subject (2) 


* All JavaScript statement within <script>...</script> tag 
implemented automatically. 

* If you want JavaScript statements within <script>...</script> tag to 
be implemented when an event occurs (such as button click), you 
should use a function. 

* Function is JavaScript statements grouped together in a named block 
and perform according to calling it, and we should give it a suitable 
name refer to its job. 


- Next steps to create a function: 
(1) Write word function and followed with its suitable name. 


(2) Write a group of JavaScript statements between {...} curly 


brackets as shown in the following: 


function function-name( ) { 
Code to be executed 


(3) To implement any function, first you must call it. 
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[1] Write an HTML tag for displaying a button within webpage. 
<input type="button"> 

[2] Write an ‘onclick’ attribute to this button. 
<input type="button" onclick=" "> 

[3] Write a function name as the value of that attribute (onclick). 
<input type="button" onclick="function name you need to call"> 


[4] Function can be executed when a button clicked. 


- Next steps to call any function: 


<input type="button" onclick="country( )" value="click me"> 


* Subject (3) 


* JavaScript statements are being executed one by one. 

* Branching is execute or non-execute some of JavaScript statements 
according to condition expression result. 

* To check the condition expression, we will use IF statement. 


Branching IF statement is written as the following: 


if (condition expression) 
{ Statements to be executed if the condition result lead to true } 


- Condition: is expression that must be evaluated first and lead to 
true or false. 

- If the result of the expression is false, the statements between { } 
curly brackets will not be executed. 

- If the result of the expression is true, the statements between { } 
curly brackets will be executed. 


- We use JavaScript language to set an interactive webpage that 
validates your entered data. 


A, 


Description 


Equal to. 


Operator 

| __ =s 

O e Moea SS 

TSS | Not equal value or not equal type. 

O > [Ormen SS 

o < [lasha Cs 

C <= [Tass than oroqualo SS 
- Data validation methods: 

* First: Leave the data field empty. 

* Second: Defining the minimum allowed length for the input field. 

* Third: Matching the data entered in the two fields. 

* Fourth: Prevent the user from entering type of data that different of 

field data type. 

* First: Required Field (Do not leave empty field): 

- If submit button clicked without typing student name, an alert box 

will be is played to inform us that this field is required. 


(1) To add a Form element to webpage, you can use the following tag: 


<form name="form1" action="required1.htm"> 


- The name attribute specifies a name used to identify the form. 

- The action attribute defines the action to be performed when the 
form is submitted. Normally, the form data is send to a webpage on 
the server when the user clicks on the submit button. 


action="required1.htm"> 


(2) To add a textbox to webpage, you can use the following tag: 


name="text1"> 


- The name attribute specifies a name used to identify the textbox. 
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(3) To add a submit button to webpage, you can use the following tags 


e="submit" value="send" onclick="return f1( )"> 


- Where: 
- The value attribute specifies the caption for a button. 


- The onclick event occurs when the user clicks on a button. 
- Specifies the JavaScript statements or function name (here the 


function is f1( )) to be executed. 
(4) To create f1() function that will be called or executed on button 
clicked, we use the following code. 


(5) To check the content of textbox that is found in the Form form! 
through the value attribute. 


(form1.text1.value=="") 


- To check that the field was not left empty, we use the following 


condition: MALCIE SAAE 
(6) To display the alert box with "required field": 


alert ("required field"); 


(7) To return false if the textbox was left empty. 


* Subject (5): 


(1) To verification if the entered data was less than the minimum 
allowed length (8 characters), we use the following tags: 


if (form1.text1.value.length<8 


(2) To comparing the content of the two fields, in the case of 


mismatch the contents show a warning message, we use the 
following tags: 


if (form1.text1.value!==form1. Text2. value 


(3) To prevent the user from entering type of data that different of 
field data type we use the following tags: 


* Subject (6): 


- Verification process of data entered can include: 
(1) Prevent user from leave textbox empty (required field). 
(2) The minimum length allowed for the password field is 8 characters 
(3) Matching the data of the two password fields. 
(4) Prevent user from enter a non-numeric data into the age field. 


* Subject (7): 


- It is a new version of the HTML language, appeared in 2014 and has 
many improvements that are evident through the use of a range of 
new tools to facilitate the idea of designing a webpage. 

- The Internet browser programs such as (google chrome, internet 
explorer, Firefox) do not fully support the implementation of the 
new tags of HTMLS. 


- There are many new Form tools used for input data such as: 
(1) Color input field. 
(2) Date input field. 
(3) Number input field. 
(4) Required attribute of text input field. 


(1) Through color input filed, the user can select a color as his input 
data from a color picker. 

- To add a color picker as an input field to the webpage, you can use 
the following tag: <input type = "color"> 

(2) Date input field by which the user can select a date value from 
date picker (calendar). 


- To add a date picker as an input field, you can use the following 
tag: <input type="date"> 


(3) By creating a numeric input field, you can also set restrictions 
on what numbers are accepted to a certain range. 


ee 


- To add a number as an input field, you can use the following tag: 
<input type="submit"> 
(4) Ifrequired attribute is added to any input field such as (text, 
password, date, number, checkbox, radio, ... etc.), 
- The browser forces the user to input this field because it is a 
required field and the form submission is not completed. 
- To add a required attribute to an input field, you can use the next tag 
<input type="text required"> 
<input type="submit"> 


* The Third unit * 


* The internet is one of the most important means of communication 
in all fields. 

* It is important to focus on the dangers that result from this usage. 

* There are vary dangers such as virus infection, which destroy the 
system data, attack to spoil the user files or harm or blackmail, 
deploy identity of personal data theft and other types of dangers. 

* Many people do not know that some information which may be 
considered useless are so important for others. 


- Some common idioms used on the internet: 
(1) Identity theft: 
- It is the impersonate of someone or using his name or any 
information concerning him for stealing him or theft of others. 
(2) Malware: 
- It is parasite programs that sneaks to backdoor computer systems. 
- The name is derived from Malicious Software. 
- To protect your system against them, use antivirus programs and 
update them continually. 
(3) Spyware: 
- -~ It is computer programs that collect personal information of the users 
without their consent. 


WW 


Al Faez! 2 Exam Night 

- To protect your computer, you must use anti-spyware programs that 
detect programs like spyware, adware and files that control your 
internet browser. 

(4) Virus: 

- It is a small program that can spread itself to infect the computer and 
programs. 

(5) Secret codes: 

- They are all the personal data that must not be shown to everyone on 
the internet like: username, password or mobile phone number. 


- Some of the important guideline to better internet Safety: 

(1) Keep your username and password secret. 

(2) Think well before publishing your personal photo or sending text 
or sound files or videos on the internet. 

(3) Before publishing anything ask the person before publishing his 
photo or sending their phone number or email address to other 
people online. 

(4) Do not reply to unknown messages or from unknown people. 

(5) Do not add people you do not know to your friend list. 

(6) Do not send messages when angry. 

(7) Not taking any step towards illegal operation is kind of hiding the 
wrong doer. 

(8) Learn how to ban people from reaching chat box and print or 
screenshot them to be easy for parents to take the right step against 
them. 

(9) Learn how to ban disturbing messages. 

(10) Know well that online chat is not personal, some others may be 

l recording or printing these chats and (publish them later on). 
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Exam model 
* First: Put the suitable concept in it's place: 


htm - Function -<script></script> - 
Java script - <input type ="text"> 


@ To add student name field, write .........00..c00ccccceceeee code. 
@ ....... extension is used to save a webpage with html code. 
3 is a set of orders that will be executed when we call 
it, and we should give it a suitable name refer to its job. 
= statements are written inside <script> </script>. 
© Java script statements which are written inside ............ are 
automatically executed. 
* Second: Put (v) or (x): 
@ From the steps of creating function, type the command 
function then write a suitable name. ( ) 
@ Java script statements which are written inside <form> 
</form> are automatically executed. ( ) 
© To create a function, type the code that will be executed 
between (## ). ( ) 
@ HTML statements which are written inside <script> </script> 
are automatically executed. ( ) 
© We call the function in order to execute its order when we 
press on the button command. ( ) 


© Shows the symbol ( @ ) when you type a password in order 
to hide the true password components. ( ) 

@ Property value added to the button to call a function by 
pressing the command button. ( ) 


Third: Choose from column (B) what suitable column (A): 
Column (A) | Column (B) 
1| To add checkbox field 
2 | If statement, begin with 
We use text box tool, 


Execute or not execute 
orders or statements 


Verification of data entered 


If 
<input type ="checkbox”> 
conditional expression 


is controlling input data. | 


to enter the degrees. 


* Fourth: Write the scientific term for the following sentences: 

(1) They are all the personal data that must not be shown to 
everyone on the internet like: username, password or mobile 
phone number. 

@ To comparing the content of the two fields. 

© It is the impersonate of someone or using his name or any 
information concerning him for stealing him or theft of others. 
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* First: Put (v^) or (x): 
© You can create a function without writing a term "function"( ) 
@ Save the text file which written HTML language with txt 
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extension. ( ) 
© if statement, begin with “function”. ( ) 
@ In the case of (X < 20) the conditional (X > 20) will be verify 

and the result of condition is true. ( ) 


© To open an information page we use Internet Explorer 
program. ( ) 


a. 


* Second: Choose the correct answer between the brackets: 


@ The...... attribute represents an event that makes the button 
respond when a mouse clicks and executes a specific code. 
(function — onclick — name — False) 


® A language used to develop interactive web page to register 
data in itis ...... (java script — html — php — all of the above) 


© The statement used to display a message inside a window 
IS: at? (alert — document.write — java script — html) 


© Input field used to execute task or call JavaScript function. , 
(Text — Reset — Submit — Button) 
© If you want JavaScript statements to be implemented when 


an event occurs (such as button click), you should use a .... 
(function — onclick — Spyware — False) 


* Third: Write the scientific term for the following sentences: 
@ Input field used to select more than one choice. 
®© Button used to send data that have been entered into the 
form to a specified webpage. 
© Input field in which you can type any text via keyboard on 
a webpage. 
© Attribute used for display a text on the button. 
© Statement which used to display a message within the webpage. 
* Fourth: Type I agree or disagree in front of the following 
sentences: 
@ You can publish photos of others or show their phone number. 
© When online do not answer any unknown messages. 


© Not taking any step against any harm on the internet is kind 
of hiding wrong doers. 
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* First: Choose from column (B) what suitable column (A): 


Column TEE TR RN 


by use antivirus 
programs and update 
them continually. 


Property you send the entered by use anti-spyware 
data to another Web page. programs. 


4 Malware can be avoided name. 
| 5 You can make up for spyware a onclick. 


* Second: Put the suitable concept in it's place: 
true - False - conditional expression - function name - function 


The form name is given form 
through the property 


Q........ is a set of commands executed when calling it and 
must be given an appropriate name. 

@ıf (X = 18: N = 14) the output of the following conditional 
expression (if X < > N) is ................ 

© if (X = 18) the output of the following conditional expression 
(EX. > 26) fS 

© Onclick property VAIUC Srann required invoked. 

are is part of the statement configuration (if) and his 
output either Yes or no (true or false). 

* Third: Put (v) or (x): 

O If you want JavaScript statements to be implemented when 


an event occurs (such as button click), you should use a text 
box. ( ) 
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®@ Select the text inside the text box by property name. ( ) 
© The secret codes is a person i:sersonates someone else's 
name for stealing or stealing others. ( ) 
@ isNaN property specifies the number of characters entered 
in the text box. ( ) 
© return property ' 3 sed to receive the value due to 
implement the fui. zion. ( ) 


* Fourth: (a) Mention two cases of data validation cases entered 
into webpage: 


(b) Write the scientific term for the following sentences: 
@ Property that is used to write the word on the button. 
@ Sentence is used to test for a certain condition. 


© Programs are hostile or spammed that sneaks into your 
computer software systems. 
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* First: Complete the following from between the brackets: 
(checkbox — button — Text data field — * — Form) 


@ Through the ................. we add a group of elements to the 
webpage such as buttons and fields. 


EE Anetta ie erat , allows to the user to enter a string or text data, 
using keyboard. 


© Shows the symbol (............. ) when you type a password in 
order to hide the true password components. 


© To select your proficiency language(s), use a .............06. 
a is used to performs a specific task. 


a E e 


* Second: Put (v) or (x): 


@ There are three types of buttons, that can be add to a from. 
( ) 

© We use value attribute to send the entered data to another 
webpage. ( ) 

© Considered Malware computer software that collects 
personal information from users without their consent.( ) 

© Statement alert( ), is used to test the conditional 
expression. ( ) 

© JavaScript commands and instructions (Statements) are 
written within HTML tags. ( ) 

* Third: (a) Write the scientific term for the following sentences: 

@ itis a small program that can spread itself to infect the 
computer and programs. 

@ Computer software that collects personal information from 
users without their consent. 

© Refer to software or spammed or disturbing sneaks a hidden 
computer system. 

© Intended personal data belonging to any individual who 
deals with information and communication technologies, 
such as a user name and password. 


(b) Re-arrange next steps to add a radio field to the webpage: 


( ) Create a new text file. 

( ) Save the text file with .htm extension. 

( ) Open the HTML document in the Internet browser. 
( ) Write the HTML tag: <input type = "radio"> 
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* First: Put (v) or (x): 
@ Text box used to clear all previous data from all input fields. 
he 
@ Secret codes are computer programs that collect information 
about users to control or watch them. ( ) 
© If you want JavaScript statements tc be implemented when 
an event occurs (such as button click), you should use if 
statement. ( ) 
(4) Through radio button field the user can select one of a 
limited number of options. ( ) 
© To add checkbox field to a webpage use tag: 
<input type = "checkbox"> ( ) 
* Second: Choose the correct answer from between the brackets: 
ee Td used to execute task or call JavaScript function. 
(submit — resert — button — text box) 


Oi Fo are small harmful programs that can spread and 
harm computer and programs. 
(Identity theft - malware — spyware — Virus) 
© To create a form use ...... tag. 
(<form> — <html> — <script> — <body>) 
_ will be added which give ability to the user to enter a 
string or text data via keyboard. 
(text box — radio — checkbox — number) 
© Secret codes are the personal information for technology 
users which must not be shown to anyone like ......... 
(Password — User name and password — Username — Virus) 
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+ Third: Put the suitable concept from the table i in nit's lack 


Identity theft 


To choose your gender you can add ...... to a webpage. 
_ sae used to send all form data to other webpage. 
= is JavaScript statements grouped together in a named 


block and performed according to call it 


9 Impersonation of someone or using the personal information 
of someone or stealing them is called .......... 


(6) Through .......... you can add a group of other elements to a 
webpage such as buttons and fields used for data entry in 
order to send these data to storing. 


* Fourth: Write scientific concept for each of the following: 
© Used to test the conditional expression. 
OA language used to verification of data entered. 


© statement used for displaying a dialogue box with message 
to the user. 


© Execution or non-execution of orders based on a certain 
condition. 


© Statement used for displaying a text within the webpage 
contents. 
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x First: Ciida the following sentences: 


(1) EATON usrssitai button user click it to submit the form data 
to another webpage assigned by action attribute value of the 
Form. 


@ The ... name should preferably indicate its function or content. 
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@ . is used to receive the value due to implement the function. 


(5) Property given the name of the form to deal with from within 
| MET 


* Second: Put (v^) or (x): 
@ Through reset button user click it to clear all data fields to its 


original state. ( ) 
@ Function is a set of commands that executes without having 
to be called. ( ) 
(3) JavaScript commands and instructions (Statements) are 
written within HTML tags. ( ) 
© To add Submit button to a webpage use <input type = ""> 
tag. ( ) 
© onclick property used to write the text that appears on the 
button. ( ) 


* Third: (a) Write the necessary codes to do the following: 
@ Declaring a function as (school). 


® Call the function (msg) to show the text welcome message 
box when you press the button show. 
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© Make sure the number of characters in a text box (text1) 
password so that not less than the number of characters 
entered for the six characters (6 characters). 


(b) What is the result of the implementation of the following 
codes? 


@ document.write("My School") } 
@ Alert("l love my school") } 


aN 


(Virus — action — branching — JavaScript — name ) 
O Need ...... if the execution or non-execution of orders based 
on a certain condition. 
@ is a small program that can spread itself to infect the 
computer and programs. 
The form name is given form through the attribute ............. 


O we use ......... attribute to send the entered data to another 
webpage. 
6 USIAG xc eosnns statements, we can verification of data entered. 


* Second: Write the function of the following commands: 
O alert ("welcome"); 

@ <input type="password"> 

3 If(form1.textbox.value==""); 

4) function f1( ) { 

© return false; 

* Third: Put (v) or (x): 


9 The check if the entered data was less than the minimum 


allowed characters, from data validation methods. ( ) 
@ We add a text data field for enter a student name to a 
webpage. ( ) 
(3) Submit button is used to delete all data fields, which you have 
entered and a return to the default values of the controls.( ) 
© To check if the user entered type of data that different of 
field data type, we can use the HTML tags. ( ) 


© To check that the field is not left empty, we can use the 
following condition: if (form1.text1.value==" ") ( ) 


———————————————— 


* First: Put (v) or (x): 


© A function is a set of commands that are executed without 


having to be called. ( ) 
@ Online talk or chat are protected and cannot be copied or 
printed. ( ) 
© Not taking any step towards illegal operation is kind of hiding 
the wrong doer. ( ) 
@ In Java Script language do not allow the user to leave empty 
fields. ( ) 
(3) Spyware: is a small program that can spread itself to infect 
the computer. ( ) 


* Second: Choose the correct answer from brackets: 
© Attribute used to type text appears on the button. 

(Name — Type — Value — Action) 
@ Placed to show the end of statement in Java Script. 


(Comma (,) — Semicolon (;) — Quotation mark("") — Nothing 
from the previous) 


© Means the execute or non-execute of Java Script 
statements according to the condition. 
(value — alert — function — branching) 
© Function used to test the contents of a text box, whether 
numeric or non-numeric: 
(alert — isNaN — if — function) 
© From data validation forms: (Do not leave empty field — 
Match password — Specify password length — all of the above) 
* Third: Complete the following sentences: 


© Attribute .... is sending data entered into another webpage. 


Al Faez 2. 
@ Malware can be avoided by 


© If the ( X = 18 ) is the result of the condition expression 
CT IRE 20 VS rnea 


© The name of the form is given by attribute ............... 

© Secret codes are the personal information for technology 
users which must not be shown to anyone like ...... 4 AESA 

* Fourth: Write the scientific term: 

© A statement will be used to check the condition expression. 


@ It is computer program that collect personal information of 
the users without their consent. 


© It is command used to receive feedback value from the 
implementation of the function. 


© Someone impersonates another person's name for stealing 
or stealing others. 


© Extension is used to save a webpage with html code. 


Exam model Aaa we by] 


* First: Choose from column (B) what suitable column (A): 


Column (A) Column (B) 


a Toadd tend box A JavaScript statement is written 
inside. 


2 | Static websites B| <input type ="text"> 


$ Lee ia iii A Written using HTML language. 


| 4 | If statement D | <input type ="password"> 
, , A statement will be used to check 
5 Seer seqe E the condition expression. 


x Dani Put W) or (x): 
® You can publish photos of others or show their phone 

number online. ( ) 
@ When online do not answer any unknown messages. ( ) 
8 To match the password values, we can use the condition 


form1.text1.value=="". ( ) 
Ə We add action attribute to <form> element for specify the 

webpage to which the submitted data will be sent. ( ) 
© To create f1 () function, we used: function f1() { ( ) 


* Third: Put the suitable concept in it's place: 


Name - Java Script Language - true - Action - Form 

® Attribute determines the process that will be executed when 
you press the submit button ............. 

@ Property used to prevent the user from choosing or selecting 
more than one option in the radio field .............. 

8... is used to create an interactive websites in which the 
user can enter data. 

© witha...... element, you can add a group of other elements 
to a webpage such as buttons and fields used for data entry 
in order to send these data to storing. 

6 I (total = 100) then the result of (total > = 100) expression 
load S Onise 

* Fourth: Re-arrange the following steps to add textbox to 
the webpage: 

( ) Save the file with .html extension. 

( ) Create a new text file. 

( ) Open the file using internet browser. 

( ) Write: <input type ="text"> inside the <form> tag. 


Exam model aves) 5al 


* First: Choose the correct answer between brackets: 


@ Property used to prevent the user from choosing or selecting 


more than one option in the radio field. 
(onclick — name — value — text) 


@ The....... attribute represents an event that makes the button 
respond when a mouse clicks and executes a specific code. 
(onclick — name — value — text) 
©... field is as the same as text field but (e) symbol will be 
displayed instead of characters to secure a password key. 
(Text box — Radio — Password — Submit) 
© Execute or non-execute some of JavaScript statements 
according to condition expression result. 
(If — Function — Condition expression — Branching) 
© Itis not enough to use ....... language to verify the validity of 
the data entered into Web pages. 
(html — java script — text — All of the above) 


* Second: Put (v) or (x): ` 


O Not taking any step against any harm on the internet is kind 
of hiding wrong doers. ( ) 


® Online talk or chat are protected and cannot be copied or 
printed. ( ) 


© Prevent the user from leave the field empty, we use 
form1.text1.value!==form1.text2.value. ( ) 


© To return false as a function returned value in the case the 
textbox is leaved empty, we used return false; ( ) 


© Inthe language of java script there is no difference between 
the case of a large or small letters when writing cing aii 


——S EEE 


(B): Put the suitable concept in it's place: 


Function - ( ; ) - Reset - htm - alert - <input type ="text"> 
@ To add student name field, write ............. code. 
@ ....... extension is used to save a webpage with html code. 
© The java script statement must be ended with 


eee eee eee ey 


O if you want JavaScript statements to be implemented when 
an event occurs (such as button click), you should use a .... 


T used to display a message in a box, which attracts 
attention of the user to read it. 


@...... button used to clear input fields from any previous data. 


Gimp Exam model we) 


* First: Choose the irei answer from Ditwon the hracka: 


0... is a small program that can spread itself to infect the 
computer and programs. 
(Spyware — Virus — onclick — Length) 
® Java Script commands and instructions are called ............. 
(Statements — function — Sentences — Secret Codes) 
(3) If (X = 15) the output of the following conditional expression 
EEEN E 
(function — onclick — name — False) 
© If the condition result lead to ........ , the statements within { } 
will be executed. (True — False — All of the above) 
© To match the password values, we can use the condition: 
((form1 .text1 .value!==form1 .text2.value) — 
(form1 .text1.value.length<8) — (form1.password.value!=="")) 


Column (A 


To add a clear button to 
the webpage. 


anj" I To add a password input 
2 Document.Write("Salah"); e field to the webpage. 
= ü Check if the password is 
3 <input type= checkpox > less than 8 letters or not. 
lf(form1.password.value. D To add a checkbox field to 
length<8); a webpage. 


i a X Display "Salah" inside the 
mpu ara g webpage. 


<Input type="password"> 


x Third: Write the scientific term of the following sentences: 
0D Field is used so that the user can select one of a limited 
number of options such as his gender (male/female). 
© Attribute used for display a text on the button. 
Button used to send all form data to other webpage. 
To prevent the user from choosing or selecting more than 
one option or choice, you can add attribute to radio input field 


Input field in which you can type any text via keyboard on a 
webpage. 

* Fourth: Put (v^) or (x): 

© For reading a textbox content using JavaScript language, 
you should give a name to the form element and give a 


name to the textbox. ( ) 
© JavaScript statement is written inside <script>. ( ) 
© We use a “onclick” attribute for writing a text on a button( ) 
© The java script statement must be ended with (""). (  ) 


SS 2 eee ee 


First: 

(1) text file/ file 

(2) <form> (5) Input 

(6) /form (7) htm 

(8) Internet browser 

Second: 

(1) x (2) x (3) ¥ (4) x (5) ¥ (6) x 
(7) x (8) ¥ (9) x (10) x 
Third: 

(1) Form 

(3) <input type="text"> 
(5) <input type="radio"> 


(2) Text box 
(4) html 


- Answers of school questions - 


First: 

(1) Form 

(2) Radio button 
Second: 

(1) Text input field, Password input 
field 

(2) Text input field 

(3) a password key 

(4) Radio input field 

Third: 

(1)B(2)C(3)A 

Fourth: 

(1) x (2) ¥ (3)x 


- The Answer of topic Two 


First: 

(1) ¥ (2) x (3) ¥ (4) x (5) ¥ (6) x 
(7) ¥ (8) ¥ (9) x (10) ¥ 

Second: 

(1) Checkbox 

(3) value (4) Submit 
Third: 

(1) E(2) C (3) A (4) B (5) D 


(3) Textbox 


(2) button 
(5) Reset 


(1) Button (2) HTML 
(3) Value (4) Checkbox 
(5) <Input type="checkbox"> 

(6) Submit 


First: 

(1) ¥ (2) x (3) x 
Second: 

(1) A button 

(3) Reset button 
Third: 
(1)C(2)D(3)A(4)B 


- The Answer of topic Three 


First: 

(1) E (2) C (3) D (4) F (5) A (6) B 
Second: 

(1) ¥ (2) x (3) x (4) x (5) ¥ (6) ¥ 
(7) x (8) ¥ (9) ¥ 


- Answer of the First Unit (1) 


First: 

(1) Checkbox 

(3) Submit 

(5) Radio button 
Second: 

(4), (1), (2), (5), (3) 
Third: 

(1) Checkbox (2) Internet browser 
(3) The form (4) Textbox 
(5) <input type="text"> 

Fourth: 

(1) Add a checkbox field to the 
webpage. 

(2) Add a radio button to the 
webpage. 

(3) Add a submit button to the 
webpage. 


(2) Submit button 


(2) value 
(4) button 
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(4) Add a Text data field to the 
webpage. 
(5) Add a button to the webpage. 


- Answers of the First Unit (2) 


First: 

(1) Radio (2) Checkbox 
(3) textbox (4) Password 
(5) button 

Second: 

(1) <input type="password"> 

(2) Name (3) Radio button 
(4) value (5) input 
Third: 

(1) text (2) Input 

(3) radio (4) reset (5) type 
Fourth: 


(1) x (2) ¥ (3) x (4) Y (5) x 


- Answer of the First Unit (3 


First: 
(1) C (2) A (3) D (4) E (5) B 


Second: (1) name 
(2) Internet Browser 


(3) HTML 

(4) Submit button (5) Reset button 
(6) All of the previous 

Third: 

(1) * (2) Notepad (3) value 
(4) Checkbox (5) Reset button 
Fourth: 

(1) x (2) x (3) ¥ (4) x (5) Y 


- The Second Unit 
- Answers of topic One 


First: (1) Y (2) x (3) Y (4) x (5) x 
(6) ¥ (7) x (8) x (9) x (10) x 


Second: (1) javaScript 
(2) Alert( ) (3) Semi-colon (;) 


( ) HTML (5) Document. Write( D 


Third: 
(1) <scripts> </script> 
(2) JavaScript (3) HTML 
(4) Statements 
(5) All of the previous 
(6) document.write( ) 
(7) alert( ) 
(8) HTML 
Fourth: (1) 
<Script> 
alert ("welcome"); 
</Script > 
(2) 
<Script> 
Document.write ("computer and 
information technology subject"); 
</Script> 


First: 
(1) JavaScript 
(3) document.write( ) 


(9); 


(2) alert( ) 


Second: 
(1) ¥ (2) ¥ (3)x 


- General revision (March) (1) - 


First: 

(1) ¥ (2) ¥ (3) x (4) x (5) x 
Second: 

(1) alert( ) (2) JavaScript 
(3) HTML (4) semi-colon (;) 
(5) Document.write( ) 

Third: 

(1) checkbox (2) value 

(3) Notepad (4) name 

(5) Radio button 

Fourth: 


(1) C (2) D (3) E (4) A (5) B 


i |: pecan ens 


First: 
(1) ¥ (2) ¥ (3) ¥ (4) x (5)x 
(6) x (7) x (8) x (9) x (10) ¥ 


Second: 


(1) Checkbox (2) button 
(3) value (4) Submit 
(5) Reset (6) html — htm 


- General revision (March) (3) - 


First: 

(1) x (2) ¥ (3) x (4) Y (5) x (6) x 
Second: 

(1) Reset button (2) Form 

(3) name (4) Radio button 
(5) Button (6) Submit button 
(7) Reset button 
Third: 

(1) Java Script 

(3) document.write( ) 
(4) HTML (5) statement 
(6) Difference (7) Notepad 
Fourth: (1) b (2) c (3) a (4) e (5) d 


First: (1) v (2) x 

(3) x (4) ¥ (5) x (6) x (7) Y (8) x 
Second: 

(1) Function (2) Alert (3) </script> 
Third: (3) , (1) , (4), (2) 


(2) alert( ) 


Fourth: 

(1) Automatically (2) Function 
(3) fees} (4) onclick 
(5) Command button 

(6) Function (7) name 
Fifth: 

(1) .htm (2) <body> (3) function 


€ 


(4) alert("Egypt") (5) </Script> 
Sixth: (3) , (1), (2) , (4) 


First: 
(1) function (2) function 
Second: 


(1) x (2) x (3) ¥ (4) yY 


- The Answer of topic Three 


First: 
(1) If 
Second: 
(1) x (2) x (3) x (4) ¥ (5) ¥ (6) Y 
(7) ¥ (8) x (9) ¥ (10) x 

Third: 

(1) B (2) C (3) B (4) A (5) D (6) D 
Fourth: (1) Branching 

(2) IF statement (3) Condition 
(4) condition expression 


(3) } 


Fifth: 
(1) Input (2) value ="click me" 
(3) onclick (4) value 


- Answers of school questions - 
First: 
(1) Branching 


Second: (1) x (2) Y 


- General revision (April) (1) - 
First: (4) , (3) , (1). (5) , (2) 
Second: 

(1) E (2) C (3) D (4) A (5) B 
Third: 

(1) x (2) ¥ (3) x (4) x (5) ¥ 
Fourth: (1) alert ( ) 

(2)html (3) value (4) Function 
(5) "Semi-colon" (;) 


(2) If statement 


————[—[——————S 


2 
- General revision (April) (2) - 


First: (1) text 
(2) HTML 
(4) .htm 
Second: (1) document.write( ) 
(2) reset button 

(3) JavaScript language 

(4) Branching 

(5) <script>...</script> 
Third: (1) action 


(3) Document.write 
(5) internet browser 


(2) The password (3) Button 
(4) function (5) A radio button 
Fourth: 
(1) ¥ (2) ¥ (3) x (4) Y (5) x 

- General revision (April) (3) - 
First: 
(1) form (2) Password field 
(3) htm (4) If statement 


(5) Interactive (6) Branching 
Second: 
(1)D(2)E(3)B()A(S)C 
Third: (1) ¥ (2) x 

(3) x (4) (5) x (6) x (7) x (8) x 
Fourth: 

(1) name 

(3) radio button 


- The Answer of topic Four 


First: 

(1) ¥ (2) x (3) x (4) x (5) x (6) Y 
Second: (1) To create f1() function 
that will be called or executed on 
button clicked. 

(2) To add a textbox to webpage, 
and the name attribute specifies a 
name used to identify the textbox. 


(2) Text box 
(4) webpage 


the user clicks on a button. and 
specifies the function name ( f1()) 
to be executed. 


(4) To display the alert box with 
"Successful". 

(5) To add a command button to 
webpage, and the value attribute 
specifies the caption for a button. 


Third: 

(1) D (2) E(3) A (4) C (5) B 
Fourth; (1) textbox 

(2) caption (3) required field 
(4) validation (5) value 


- The Answer of topic Five 


First; (1) x 
(2) ¥ (3) ¥ (4) x (5) ¥ (6) ¥ (7) x 


Second: 

(1)C (2) D (3)B (4) A (5)C 
Third: (1) E (2) A (3) D (4) C (5) B 
Fourth: 


(1) Name (2) Text Box 
(3) Radio button (4) Reset Button 
(5) value (6) button 


Fifth: (1) B (2) C (3) A (4) E (5) D 


- Answers of school questions - 


First: 

(2) Defining the minimum allowed 
length for the input field. 

(3) Matching the data entered in the 
two fields. 

(4) Prevent the user from entering 
type of data that different of field 
data type. 

Second: (1) x 

(2) ¥ (3) ¥ (4) ¥ (5) ¥ (6) x (7) ¥ 


Se e 
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- The Answer of topic Seve 


First: 
(1) text file (2) HTML (3) <form> 
(4) date (S)htm (6) Open 


Second: (4) , (5), (2) , (3), (1) 


First: 

(1) HTMLS5 (2) required 
(3) a number input field 

Second: (1) b (2) c (3) a 


Answer of the Second Unit (1) 


First: (1) x (2) x (3) Y (4) x (5) Y 
Second: (3) , (1) , (4) , (2) 

Third: 

(1) Document.write statement 

(2) JavaScript (3) Function 
(4) Alert statement (5) If statement 
Fourth: 

(1) C (2) A (3) D (4) E(5)B 


Answer of the Second Unit (2) 


First: 

(1) value (2)name (3) onclick 
(4) Function name (5) textbox 
Second: 


(1) x (2) ¥ (3) ¥ (4) x (5) x 
Third: (1) B (2) D (3) A (4) E(5)C 
Fourth: (3) , (1) , (4) , (2) 


Answer of the Second Unit (3) 
First: 
(1) ¥ (2) x (3) x (4) ¥ (5) ¥” 
Second: 
(1) name 
(3) JavaScript 
(4) forml.tl.value (5) Function 
Third: (3) , (4), (1), (5), (2) 
Fourth: (1) C (2) A (3) E(4) B (5) D 


(2) <script></script> 


ee 
| 


- The Answer of questions 


First: (1) ¥ (2) x 

(3) ¥ (4) x (5) x (6) x (7) ¥ (8) x 
Second: (1) All of the previous 
(2) Virus (3) internet safety 
(4) Spyware (5) angry 


First: (1) Identity theft. 

(2) Spyware. (3) Virus. 
(4) User name and Password 

(5) A discussion or informational 
website published on the World 
Wide Web. 

Third: (1) x (2) Y (3) Y (4) x 


- General revision (May) (1) - 


First: (1) Text input field 

(2) Secret codes (3) JavaScript 
(4) value (5) A radio button 
Second: 

(1) D (2) C (3) A (4) E(5) B 
Third: (1) ¥ (2) x (3) ¥ (4) x (5) x 
Fourth: (1) Function 

(2) Identity theft (3) "Semi-colon" (5) 
(4) false (5) onclick 


- General revision (May) (2) - 


First: (5) , (2), (4), (1), (3) 
Second: (1)¥ (2) x (3) x (HY (5)¥” 
Third: (1) E (2) A (3) D (4) B(5)C 
Fourth: (1) Malware = (2) alert ( ) 
(3) Length (4) html (5) Spyware 


- General revision (May) (3) - 


First: (1) d (2) c (3) e (4) b (5)a 
Second: (1) x (2) x (3) Y (4) x (5) x 
Third: (1) Identity theft 


(2) HTML (3) Value 


e iee 


OE 2 


(4) Malware 


(5) <script></script> 
Fourth: (1) b (2) a (3) c (4) d(5)a 


* Answer of the Model Exams * 


= (1) sj 531a (page 2) - 


First: (1) <input type ="text"> 
(2) htm (3) Function (4) Java script 
(5) <script></script> 
Second: (1) ¥ (2) x (3) x (4) x 
(5) ¥ (6) x (7) x 
Third: (1) B(2) A (3) E (4) C (5) D 
Fourth: (1) Secret codes 
(2) 
if(form1 .text1 .value!==form1.Text2.value) { 


(3) Identity theft 


TOARE EIN panes) | 
First: (1) x (2) x (3) x (4) x (5) ¥ 
Second: (1) onclick (2) java script 


(3) alert (4) Button (5) function 

‘Third: (1) Checkbox (2) Submit 

(3) Text data field (4) value 

(5) document.write 

Fourth: 

(1) disagree (2)agree (3)agree 
= (3) ed no 5l! (page 5) 


First: (1) E (2) D (3) A (4) B (5) C 
Second: (1) function (2) true 
(3) False (4) function name 
(5) conditional expression 
Third: (1) x (2) x (3) x (4) ¥ (5) yY 
Fourth: 

[A] Cases of data validation are: 
(1) Leave the data field empty. 
(2) Define the minimum allowed 
length for the input field. 


[B] (1) value 


(2) if statement (3) Malware 


= (4) 3 quaiti wé 55121 (page 6) 
First: (1) Form (2) Text data field 


(3)* (4) checkbox (5) button 
Second: (1) (2) x (3) x (4) x (5)” 
Third: [a] (1) Virus (2) Spyware 
(3) Malware (4) Secret cods 


[b] (1). (3). (4), (2) 


- (5) 5 aia) Jind 3,10! (page 8) 


lirst: (1) x (2) x (3) x (4) ¥ (5) Y 
Second: (1) button (2) Virus 
(3) <form> (4) text box 
(5) User name and password 
Third: (1) radio button (2) submit 
(3) function (4) Identity theft (5) Form 
Fourth: (1) If Statement 

(2) JavaScript (3) alert( ); 

(4) branching (5) docim at.write 


(6) xá Gs 5,101 (page 9) 4 
First: (1) submit (2) function 
(3) — Do not leave empty field. 

— matching Password. 

— Specifies the password length. 
(4) return (5) Property (name) 
Second: (1) ¥ (2) x (3) ¥ (4) x (5) x 
Third: [a] (1) function School(_ ) { 
(2) <script> 

<body> 
<input type="button" onclick="msg()" 

name="show"> 
function msq( ) { 


alert("Welcome"); } 
</script> 
</body> 


[b] (1) Show the text "My School" 
within the webpage. 


(2) Show text ("I love my school") 
inside the text box within a 


message. 


- (7) tapui 5y\2) (page 11) 


First: 

(1) branching 

(2) Virus (3) name 

(4) action (5) JavaScript 


Second: (1) Displays a dialogue box 
with message "welcome". 

(2) To add a password input field to 
the webpage. 

(3) Check if the textbox content 
empty or not. 

(4) To create a function named fl1( ) 
that will be called or executed on 
button clicked. 

(5) To return false if the textbox 
was left empty. 

Third: 


(1) ¥ (2) (3) x (4) x (5) ¥ 


- (8) águ 55/2) (page 12) - 


First: (1)x(2)x@) v (4) ¥ (5) x 
Second: 


(1) Value (2) Semicolon (;) 
(3) branching (4) isNaN 
(5) all of the above 


(2) use antivirus programs and update 


them continually. (3) False 
(4) Name 

(5) Username and Password 

Fourth: 

(1) If statement (2) Spyware 


(3) Return (4) Identity theft (5) htm 


DJA oer’ 


~ (9) dati o£ 5,12) (page 13) 


First: (1) B (2) C (3) D (4) E (5) A 
Second: (1) x (2) Y (3) x (4) Y (5) Y 


Third: (1) Action (2) Name 
(3) Java Script Language 
(4) Form (5) true 


Fourth: (3) , (1) , (4), (2) 
- (10) as! 5512) (page 15) - 


First: (1) name (2) onclick 

(3) Password (4) Branching (5) html 
Second:(1) v (2) x (3) x (4) ¥ (5) x 
Third: 

[A] Cases of data validation are: 

(1) Leave the data field empty. 

(2) Define the minimum allowed length 

for the input field. 

(3) Matching the data entered in the 

two fields. 

(4) Prevent the user from entering type 

of data that different of field data type. 
[B] (1) <input type ="text"> 

(2)htm (3)(;) (4) Function 

(5) alert (6) Reset 


- (11) Lies 5,!s1 (page 16) - 


First: (1) Virus 

(2) Statements 

(5) 

form1.texti.value!==form1 .text2. value 

— (1) B (2) E (3) D (4) € (5) A 
irad: 


(3) False (4) True 


(1) Radio button (2) Value 
(3) Submit (4) Name (5) Text data field 
Fourth: (1) v (2) ¥ (3) x (4) x 


With the best wishes for success 
Al Faez ~ 


